Camel 's blog

Technical notes written freely.

[html] 從 html spec 了解有時候按下 enter 會自動 submit form,有時卻不會?

在開發網頁時,我們時常會使用 <form> 實作表單,但你是否有發現有些 <form> 按下 enter 不會自動 submit,有些卻會呢? 讓我們來看看 html spec 怎麼定義何時應該觸發 form 的 submit 行為 4.10.22.2 Implicit submission A form element’s default button is the first submit button in tree order whose form owner is that form element. If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the “enter” key while a text field is focused implicitly submits […]

[rails] Latest N+1 queries 問題

上一篇我們介紹過了 N+1 queries 是什麼與解決方式 這篇想更進一步介紹關於 latest N+1 queries 是什麼,可以如何解決? 以下範例,可以自行下載 rails_n_plus_1_queries_problem github repo 首先我們有個 Post / Comment 的 model,彼此是 1-to many 的關係(示意圖與程式碼如下圖) 接下來我們想取得每個 post 的最新 comment,於是我們寫了這樣的程式碼 這時候你會看到 rails console 實際上執行這段程式碼的方式是逐一的 SQL query 每個 post 的 comment 因此產生了 N+1 queries (10+1 個 queries) 於是你嘗試了我們上篇介紹的 includes 接著你會發現還是發生了 N+1 queries,但若仔細點會發現原來的 comments 確實有 includes 的作用 但變成了 N+2 queries 😂 […]

[rails] N+1 queries 是什麼

寫過 Ruby on Rails 的人,面試肯定都會被問的其中一題 你知道什麼是 N+1 queries 嗎? By 面試官 這篇簡介一下所謂的 N+1 queries 是什麼?在 rails 裡,我們通常會如何解決? 以下範例,可以自行下載 rails_n_plus_1_queries_problem github repo 首先我們有個 Post / Comment 的 model,彼此是 1-to many 的關係(示意圖與程式碼如下圖) 接下來我們嘗試取出目前最新的 10 則 comment 的 post title,顯示在畫面上,因此我們嘗試這樣寫 這時候你會看到 rails console 實際上執行這段程式碼的方式是逐一的 SQL query 每個 comment 的 post 因此原來拉最新 10 則 comment 的 SQL 實際上變成了 11 […]

/node_modules/node-sass: Command failed.

Recently, while upgrading Node.js from version 14.17.3 to 20.9.0, I encountered a bunch of errors after running `yarn install`. After some research, I found out that node-sass has compatibility issues with different versions of nodejs. NodeJS Supported node-sass version Node Module Node 20 9.0+ 115 Node 19 8.0+ 111 Node 18 8.0+ 108 Node 17 […]

[zsh] 切換目錄時自動根據 .nvmrc 切換 nodejs 版本

最近在整理電腦環境時,順便看了一下之前切換的 nodejs 版本的方式 以往都是透過 nvm 去管理 nodejs 的各個版本,並且透過 avn 自動根據 .node-version 切換 nodejs 版本 但這次在看 avn 時發現,這個 package 從 2020 以後就開始沒有在維護了, 在切換 nodejs 10.x 以上時也會部份錯誤 相關的 issue 可以參考這個 issue: Is avn project officially unsupported? https://github.com/wbyoung/avn/issues/109 這邊紀錄一下,如何不使用 avn 在 zsh 切換目錄時,自動偵測 .nvmrc 設定檔呼叫 nvm 切換 nodejs 版本 💡 記得要先安裝好 nodejs 與 nvm 就大功告成了 🎉 參考資料

[css] collapsing margin 是什麼?

不常寫前端的工程師們,時常為了各種的 CSS 行為感到挫折(圖述) 其中一個大概就是 collapsing margin,明明說好的 css box model margin 卻不講武德的變成右邊那樣 Collapsing margin 規格定義 讓我們來看看 CSS3 對於 margin 的規格定義 NOTE: Adjoining margins in block layout can collapse. See CSS2§8.3.1 Collapsing Margins for details. Also, margins adjoining a fragmentation break are sometimes truncated. See CSS Fragmentation 3 § 5.2 Adjoining Margins at Breaks for details. https://www.w3.org/TR/css-box-3/#margins 看起來關於 margin 會 collapse 相關的定義,要參照 CSS2 spec 標準 可以看到 Collapsed margin 相關的規範 […]