還記得之前曾經記錄過 Nightwach.js 血淚史，那時候最大的問題是以 Nightwatch.js 的架構 都是要經過 selenium 去串各 browser 的 web driver 導致排查時的錯誤原因可能會發生在以下三個點 Nightwath.js Selenium Web Driver (chrome driver, gecko driver, ie driver …. .etc.) 導致排查上會需要層層檢查 (血淚) 因此後來在 chrome headless browser 釋出後，我們想試著是否能直接使用 chrome driver 串接 puppeteer 減少 selenium 這層的排查工作，另一方面也可以減少在非 GUI 的機器上跑的 web driver 不同而導致的差異性． 因此我們將 nightwath.js 的設定檔更改如下 將設定分別分為 dev 與 default，差別如下 dev: CI/CD 機器非 GUI […]
常見的命名規則(Camel Case, Snake Case, Kebab Case)
介紹幾種常見的命名規則 Camel Case因為單字的開頭大寫，看起來像是駝峰 XD可以進一步細分為 upper camel case (BrowserStack) 與 lower camel case (iPhone)，差別在於開頭第一個字是否為大寫．另外，因為 upper camel case 又稱為 Pascal Case，因此有部分人泛指 Camel Case 為 lower camel case Camel case is named after the “hump” of its protruding capital letter, similar to the hump of common camels. Snake Case簡單來說是用 _ 來分隔單字的命名規則，像是 fibonacci_sequence起源來自 Ruby 社群的一句討論 BTW…what *do* you call that […]
如何使用 shell script 篩選 nginx log 的時間區段
前陣子因為一些狀況，在試著查 nginx 的 access.log，於是剛好想說紀錄一下如何使用時間區間有效率的查 nginx log OS: 不得不說 awk 真的是方便又好用呢 ~ 如果沒有特別更改過 nginx access.log 格式的話，應該會如下所示 查過去兩小時的 access.log 資料access.log 的第 4 個欄位 > 我們自己定義的 Date 查一個時間區段的 access.log 資料Date1 > access.log 的第 4 個欄位 < Date2 參考資料： https://stackoverflow.com/questions/7706095/filter-log-file-entries-based-on-date-range
TypeError: this.getResolve is not a function
前一陣子在建立前端開發環境時，遇到了以下錯誤 TypeError: this.getResolve is not a function 查了一下發現是 sass-loader 和 webpack 的相容性問題 將 sass-loader 降為 7.3.1 即可正常運作 參考資料: https://stackoverflow.com/questions/58225847/module-build-failed-typeerror-this-getresolve-is-not-a-function
[npm] 如何執行 node_moduels 的 package
大家應該有過裝 local 的 npm package，發現不能執行相關的指令 像是裝了 webpack npm install webpack 試著下 webpack ，發現噴以下錯誤訊息 command not found: webpack 但如果使用 npm install -g webpack 就可以正常執行 這個原因通常是 npm 預設 local 安裝的路徑問題 你可以透過 npm bin 印出實際 package 執行檔的安裝目錄，並且加進 PATH 變數即可執行 export PATH=$(npm bin):$PATH 或是在 npm 5.2.0 以後你可以使用 npx [package] 自動代入路徑執行 像是: npx webpck 另外的方式你可以寫到 npm script 中 使用 npm […]
[javascript] delete 和設為 undefined 差別在哪?
前一陣子在討論刪除一個變數的屬性值，應該用 delete 還是設為 undefined 呢? 讓我們來看看兩種作法差別在哪 undefined單純只是將屬性值改為 undefined ，屬性仍然存在． delete刪除此 Object 的屬性 直覺看起來好像 delete 可以準確的刪除此屬性值，但有個要注意的地方是 delete 並不會刪除 prototype chain 的屬性值 舉個例子: 因此可能要注意的是，如果要避開 prototype chain 上面的屬性值 必須要使用 hasOwnProperty 進一步檢查屬性值 XD 參考資料: https://stackoverflow.com/questions/14967535/delete-a-x-vs-a-x-undefined
[css] initial/inherit/unset 有什麼差別呢?
常寫 CSS 應該都經常遇到樣式被覆蓋後不如預期希望回復為初始值等等的問題 常見的場景可能是使用 bootstrap, semantic 等等的 css framework 時，可能是 display, color 等等的屬性值被繼承或更改，希望回復為預設值或繼承至 parent． 另外在專門做網頁第三方元件，像是 disqus 這種必須放在百百種網頁上的元件，在技術規劃初期就將所有 CSS 做上 all: initial 更是不可或缺的事情! 以下就讓我們看看 initial/inhreit/unset 三者的差別吧 ~ initial將此屬性值恢復為瀏覽器預設值．備註：所有 browser 都有自己的一套預設樣式，就像 input 在各 browser 都長不一樣是相同的道理 inherit繼承 parent 的設定值 unset如果 parent 有設定此屬性值則 inherit ，反之則 initial 讓我們來個簡單的例子，相信你也可以很簡單弄懂他們的差別 XD 首先有個 HTML: 然後對應的 CSS: 結果: 在 Chrome 上看的結果 因為 inherit 是繼承，所以會套用到 […]
Object.defineProperty 用法簡介
Object.defineProperty 可能大家不是很常用到，但其實它無所不在，甚至於許多 mvvm, mvc 的資料繫結都是透過此接口達成的． 像是以下這段簡單的 code 其實就等價於 可以發現 object.defineProperty 有幾個可設定的 descriptor 接下來本文將針對這幾個設定的使用及應用場景做個說明 configurable: 預設為 false 已定義的 descriptor 是否可被更改 (writable:true 除外)，以及 property 是否可被 delete 常見的例子是設定為 configurable:false 避免設定的 property 被 delete e.g. configurable:false 的例子其實蠻常見的，像是 browser 內建的 location writable: 預設為 false 常見的是與 configurable:false 搭配使用，可以避免 descriptor 與value 被做任何的修改．(進階一點的方法可以用待會介紹的 getter) enumable: 預設為 false 此 property 是否可以被列舉(for… in/Object.keys) 常用作於類似 prototype […]
Natas wargame (level 0 – 10) 詳解(1)
Natas 是一個 Web 資安的 wargame，蠻適合剛入門的新手玩玩 這邊分享一下我自己每關的思路，為了保有遊戲體驗，就不分享破關的帳密囉 😛 wargame 網址: https://overthewire.org/wargames/natas/natas0.html 每關的帳號/密碼: natasX/{password} e.g. level0 ( http://natas0.natas.labs.overthewire.org/ ) 下面就開始分享破關思路惹~ level 0 You can find the password for the next level on this page. 嗯，右鍵打開 web devtool(element tab) 就找到密碼了 level 1 You can find the password for the next level on this page, but rightclicking has been […]
如何刪除 X-Powered-By:Express
第一次用 Express 作為 application server 時，發現 response header 總是會帶有 X-Powered-By:Express 在這人心險惡的時代(? 不免會希望暴露的資訊越少越好 XD 移除 X-Powered-By:Express 的做法 (加在 app.js) 如果 Express 是大於 3.0.0rc5 的版本 更早之前的版本 參考資料: https://stackoverflow.com/questions/5867199/cant-get-rid-of-header-x-powered-byexpress