[mac] backward/forward words in iTerm2

最近換了新版的 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

Continue reading


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

Continue reading


如何以 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

Continue reading


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

Continue reading


[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