[mac] mysql2 gem: Don’t know how to set rpath on your system, if MySQL libraries are not in path mysql2 may not load

這幾天在裝 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

Continue reading


[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 (第六關)明顯的第一個參數是不擋 […]

Continue reading


[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. 雖然看起來不是很好,但是 […]

Continue reading


[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 […]

Continue reading


常見的命名規則(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 […]

Continue reading


如何使用 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

Continue reading