[vscode] experimental support for decorators is a feature that is subject to change in a future release

在 visual studio code 使用 ES7 (ECMA Sciprt7) 的 decorator 時,可能會遇到 experimental support for decorators is a feature that is subject to change in a future release的語法錯誤提示 至於 decorator 是什麼在這篇就不多加介紹(可參考這篇),不過寫過 python 的人應該會有使用過。(目前 ES7 的 decorator 只支援 class) 這是因為預設 vscode 並不支援 decorator 的語法檢查,需要手動打開支援 decorator 的語法功能。 在 project 目錄創建 tsconfig.json 新增以下內容 重新開啟 vscode,就不會出現語法錯誤提示了!   參考資料: https://ihatetomatoes.net/how-to-remove-experimentaldecorators-warning-in-vscode/  

Continue reading


[nginx] 移除不必要的預設 header,”Server” 版本

預設安裝好 nginx 會有 web server 版本資訊的 header 如下圖   為了資訊安全上面的考量,建議將 /etc/nginx/nginx.conf 的 server_tokens off; 打開 這樣就不會在 header 顯示 nginx 的版本資訊。   如果你想進一步將此 header 完全移除掉的話,可以考慮裝 nginx 的更改 header module 這樣就可以設定 more_clear_headers Server; 移除此 header。   參考資料: https://serverfault.com/questions/214242/can-i-hide-all-server-os-info https://geekflare.com/wp-content/uploads/2016/05/nginx-default-header.png

Continue reading


[centOS] 安裝 phantomjs 錯誤,phantomjs: error while loading shared libraries: libfreetype.so.6: cannot open shared object file: No such file or directory

在 centOS 上面安裝 phantomjs 遇到了以下的錯誤 phantomjs: error while loading shared libraries: libfreetype.so.6: cannot open shared object file: No such file or directory 這是因為缺少 phantomjs 的相依套件 解決方法: 參考資料: http://sameerhalai.com/blog/how-to-install-phantomjs-on-a-centos-server/

Continue reading


[Nodejs] module.exports 與 exports 的差別

如果沒有接觸過 commonJs 這類可以將 js 模組化為檔案的開發者,剛開始寫 Nodejs 時可能會有點不懂 module.exports 與 exports 的差別 舉例來說: 有一個 player.js 這樣就產生了一個 player.js 這個模組 如果今天 main.js 想要使用這個模組,就可以透過 require 來引入模組 如: 再來我們看看使用 exports 新增一個 removePlayer 的方法 原因是在模組裡面其實會預先幫你做 預設當我們使用 exports 其實也代表更改了 module.exports 。 但當直接使用 module.exports = {…} 其實也就更改了模組對外公開的物件,因此更改 exports 時無法更改到 module.exports。   參考資料: https://program365.wordpress.com/2015/07/02/understanding-module-exports-and-exports-in-node-js/

Continue reading


[test] Nightwatch.js debug 血淚史

前情提要: 本篇使用 [email protected] ((3.5.0以上會有不同的問題… 使用 Nightwatch.js 寫前端的 E2E test一段時間了…踩了不少雷 Nightwatch 底下還是使用 selenium 與 支援各瀏覽器的 webdriver ,其實大多狀況都是發生在各 web driver 跟 selenium….啊(嘆~ 來記錄一下使用 Nightwatch.js 遇到的幾個問題~ selenium: Error retrieving a new session from the selenium server Connection refused! Is selenium server started? …. 最常出現以上這個訊息,可以先試著單獨開啟 selenium 在預設 port 4444,透過瀏覽器手動創建 session 確認 selenium 有正常運作。 java -jar selenium-server-standalone-{VERSION}.jar 另外,如果要透過 nightwatch.js 自動開啟 selenium,記得要將 nightwatch.json 設定檔中的 selectium start_process 設為 […]

Continue reading


[javascript] 清空 array 的方法介紹與比較(new、pop 及 shift…等)

紀錄一下幾個 javascript 清空陣列的方法比較。 指派一個新的空陣列 reference arr = []; ps. 如果有其他變數仍然指到原本的陣列,會造成占較多 memory,以至於效能不佳。 長度設為 0 arr.length = 0; splice 移除 arr.splice(0, arr.length); 迴圈 pop 清空 迴圈 shift 清空 來看看上面這幾個清空陣列的 jsperf 效能比較:https://jsperf.com/array-destroy/40 在多數瀏覽器,pop 和 shift 的方法最有效率,但在 firefox new 的方法效率遠大於其他方法。   參考資料: http://www.jstips.co/en/javascript/two-ways-to-empty-an-array/

Continue reading


[javascript] throttle 與 debounce,處理頻繁的 callback 執行頻率

在 javascript 的程式碼執行,採的是非同步的 callback 函式。 因此時常會是一個 event 觸發 callback 執行,但有時可能會頻繁的觸發事件(比如說瀏覽器的 resize 或 scroll 等等事件) 這時候如果每次觸發都執行 callback 可能不是這麼必要,甚至導致程式碼執行效率不佳 我們就可以透過 underscore.js throttle 或 debounce 的方法去優化這些 callback 的執行時間點。 debounce: 把短間隔時間(自行設定微秒)內重複觸發的事件合併為一個(自行設定觸發時間點),只呼叫一次 callback。 像是當瀏覽器 resize 時,會頻繁觸發 resize 事件,使用 debounce 就可以達到視窗最後改變時再觸發 callback。 下面例子,試著把滑鼠頻繁的在 Trigger area 中移動,可以看到 debounce 函數的實際效果。 See the Pen Debounce. Trailing by Corbacho (@dcorb) on CodePen. 上面這個例子,可以看到當你在 Trigger area 頻繁移動滑鼠(400微秒內)時,僅會觸發一次的 […]

Continue reading


[webpack] webpack HMR(Hot Hodule Replacement) 應用於 django 搭配 react-hot-loader

前陣子剛換工作時,剛好部門內使用的後端為 django,前端為 react,然後使用 webpack 做編譯、打包及壓縮等佈署的動作。 但在開發前端 react 時必須要重複以下流程,更改程式碼 => 儲存 => 重新整理 想說既然有用 webpack ,就試著利用 webpack 所提供的 HMR(Hot Module Replacement) 來做 hot reload,開發會更快一點。 以下是當初設定的步驟~ dajngo 設定部分: 安裝 django-webpack-loader pip install django-webpack-loader  設定 settings.py 讓 django 預設會抓取 assets/bundles 與 asset/static 這裡個位置的靜態檔案, webpack BUNDLE_DIR_NAME 設為 ”,讓 webpack-loader 也至以上兩個路徑抓取靜態檔。 在 django 使用的 tempalte 中引用 wepack-loader module 上面這段( render_bundle […]

Continue reading


[test] 單元測試的好幫手 rewire,讓你更容易測試 private 方法及變數

前一陣子在寫單元測試(unit test)時,遇到一些問題,經過同事的提點,看到了 rewire 這個 github repo 當在寫測試時,我們可能會分許多檔案去管理我們的模組,然而模組內可能有一些 private 的方法,這時候如果想測試模組內的 private 方法該如何測試呢? 以往可能的作法: 設定環境變數(例如:test: true),在測試環境時才 export prviate 方法。 但 rewire 這個 npm package 提供一層更方便測試 private 的方法。 接下來看看實際用法吧~ 比如我們有 test.js index.js 則會 require(‘test.js’); 這個模組 當我們要寫 unit test 時會發現 test.js 的 add() 因為沒有 export 所以無法被測試,或是當在測試 test 模組時,也沒辦法把 add 做 stub(因為 js 在 function 會是 call by value) 這時候我們可以使用 rewire […]

Continue reading