這幾天在裝 mysql2 gems 時發生如下的錯誤 原因主要是 ld: library not found for -lssl 通常是 openssl 未安裝或路徑設定有誤 可以先試著重裝 openssl ，必且重新設定對應的環境變數 重新安裝 mysql2 gem 應該就正常囉！ 參考資料: https://stackoverflow.com/questions/30834421/error-when-trying-to-install-app-with-mysql2-gem/30837897#30837897?newreg=a89c9550c93f4e7c84db03b8c15ff3d9
透過環境變數知道目前是否為 webpack-dev-server
在過 webpack 時可以檢查 WEBPACK_DEV_SERVER 是否為 true 以上程式碼可以判斷是否為 webpack-dev-server 在 serve 網頁 (通常為開發模式) 藉此變數可以套用一些僅開發時才需執行的流程(e.g. HMR) 參考資料： https://github.com/webpack/webpack-dev-server/pull/1929
[XSS] web security wargame (上)
最近在玩 alert(1) 的 XSS 小遊戲，藉此紀錄一下每關的思路及解法 (建議先自己玩過之後再看這篇，免得被我雷到 XD) XSS 的危險性就不特別解釋了 輕則可以注入挖礦程式，重則被盜用個人資料 以下有每關的解法及答案，防雷 ～ Warmup (第一關)相當單純的沒做任何輸入過濾，可以直接湊出 “) 即可 Adobe (第二關)多了 ” 取代為 \” 的處理，那就多放個 \ 囉 XD JSON (第三關)完全用 JSON.stringify 做字元過濾，少了 <, >, / 這些的過濾 Markdown (第四關)常見的 markdown 轉為 HTML 的取代方式，看起來突破口不是 a 就是 img，嘗試使用 onerror 接口突破 DOM (第五關) 看了很久，找到最有可能的為 createComment 這個接口，配合 > 塞上 img 即可 Callback (第六關)明顯的第一個參數是不擋 […]
[ubuntu] Your PHP installation appears to be missing the MySQL extension which is required by WordPress
The ‘INFORMATION_SCHEMA.GLOBAL_STATUS’ feature is disabled: see the documentation for ‘show_compatibility_56’
[css] 讓 CSS 動畫重新開始
前一陣子在做 CSS 動畫的時候，遇到了特定情況會希望動畫重新開始的狀況 像是每點擊一次按鈕就觸發一次動畫的情境，查了一下相關的做法．記錄在這 舉個例子，我們有個 fade-in 的動畫，希望在點擊文字時重新開始動畫 這時候你可能會很直覺認為再次添加 fade-in class ，像是以下這樣 See the Pen restart css animation by camel2243 (@camel2243) on CodePen. 然後你會發現不 work，於是直覺會想說那先做 remove 再 add XD See the Pen css animation demo1 by camel2243 (@camel2243) on CodePen. 結果發現還是不會動，只好開 setTimeout 大絕 www See the Pen css animation demo3 by camel2243 (@camel2243) on CodePen. 雖然看起來不是很好，但是 […]
[test] Nightwatch.js 如何使用 puppeteer 做測試
還記得之前曾經記錄過 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