通常原因會是更新了 php 版本卻沒裝對應的 mysql package 試著將以下 package 安裝後，並重啟 nginx/php-fpm 即可 備註: x 為你所裝的 php 版本
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
[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將此屬性值恢復為 css property 的預設值，至於是什麼值可以參考 css 2.1 spec 或者是 css3 spec。 備註：所有 browser 的 tag ，比如 <a> 都有自己的一套預設樣式（user agent stylesheet），就像 input 在 各 browser 都長不一樣 是相同的道理，但不等同於 initial 的預設值。 inherit繼承 parent […]