最近換了新版的 mac，忘記當初怎麼設定 iTerm2 的指令列 backward/forward word，順道把這次設定的過程記錄下來，下次可以參考 XD 設定路徑: iTerm2 -> preference -> Profiles -> Keys 原本的設定 請更改為以下設定 ⌥ ← : Send Escape Sequence + b ⌥→：Send Escape Sequence + f 如下圖: 儲存後就可以看到 backward/forward words 有生效囉 🎉 參考資料: https://coderwall.com/p/h6yfda/use-and-to-jump-forwards-backwards-words-in-iterm-2-on-os-x
[CI/CD] testcafe/nightwatch.js 總是發生 element not visible/found
最近剛好同事也遇到在 circleCI 上使用 chrome 跑 testcafe 總是發生以下的錯誤 The element that matches the specified selector is not visible. 但在本機使用 chrome 卻總是正常的執行，無任何的錯誤． 其實這個錯誤通常蠻常見於 RWD 的網站，通常都是由於錯誤的 screen size 導致部分 element 可能因為 viewport 過小而被隱藏． 不管是 testcafe/nightwatch.js 或是其他 end-to-end test 都能找到不少 issue，像是 testcafe: https://github.com/DevExpress/testcafe/issues/1988 nightwatch.js: https://stackoverflow.com/questions/43583715/running-nightwatch-js-tests-via-jenkins-windows-size-issue 很大的共通點都是跑在 jenkins/circleCI/travisCI，這些你看不到 GUI 的機器上 XD 這邊提供幾個方向和建議供大家參考及排查： CI/CD 機器上可能不支援 GUI 的 browser以 chrome 為例子請參考 doc […]
如何以 interactive/non-interactive 方式初始 gcloud sdk
因為工作關係有機會碰到 gcloud sdk，想說紀錄一下如何以不同方式初始 gcloud sdk 假設你已經照著 guideline 裝好 gcloud sdk，接下來要做 sdk 的初始化 以下介紹三種方式，依據執行環境(e.g. 是否為自動化 script/是否有 GUI 之類的) 你可以選擇適合的方式初始化 interactive (互動式，開啟 browser) interactive (互動式，僅在 console) non-interactive (非互動式，手動執行 gcloud init 的執行步驟) 參考資料: https://stackoverflow.com/questions/42379685/can-i-automate-google-cloud-sdk-gcloud-init-interactive-command https://cloud.google.com/sdk/docs/initializing
[chrome] cors + 302 redirect 發生 request 持續 pending 狀況
撰寫本篇記錄文章時所使用的為以下測試環境： 最近在排查一個在 Chrome 上發生的靈異狀況，大致上的重現(隨機)流程如下: 發送一個 fetch (mode: cors) 的 ajax request (same-origin) ajax response 為 302 redirect chrome devtool 顯示 redirect 後的 request 總是處在 pending 狀態 狀態上一直如下圖顯示 詳細測試後此情況僅在 Chrome 發生此狀況，進一步使用 chrome://net-export/ 查詢 network log，看起來 chrome 確實發送 request 後就無任何回應，更進一步使用在 server 端檢查 access.log 卻是沒收到任何 request． 查詢後也有幾個相關的 issue，目前並無找到可行的 workaround 只能盡可能避開使用 302 redirect + cors 發送 same-origin 的 ajax […]
[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
透過環境變數知道目前是否為 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. 雖然看起來不是很好，但是 […]