過去剛開始接觸 rails 的時候，曾經遇到幾次明明更改了 application.js 中 require 的檔案，但在 rake assets:precompile 後卻總是沒辦法正常更新到 public/assets 底下的打包後檔案內容 記錄一下，如何將 cache 和打包檔案移除掉
最近在整理電腦環境時，順便看了一下之前切換的 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 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 相關的規範 […]
今天來介紹 position: sticky，首先來看看這個 CSS 的支援度（97%） 嗯….IE 不支援（沒關係，IE 不是瀏覽器，只是個相容性解決方案 by @tomwarren 來看看 position: sticky 的 MDN 文件 說明 The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. https://developer.mozilla.org/en-US/docs/Web/CSS/position 簡單翻譯來說，被設定 sticky 的 element 會根據 […]
介紹一個不常見的 css 屬性 isolation，可以簡單地幫你建立新的 stacking context 如果你還不知道什麼是 stacking context，可以先參考 這篇 那建立新的 stacking context 可以做什麼呢？可以幫你和其他層的 mix-blend-mode / z-index 等等數值作字面上的意思 “隔離” 主要有兩種值： 目前這個屬性支援度算是相當普及了（96%） 如果看完這個屬性，你還是不知道他可以用來做什麼，那你可以試著玩看看 Stacking Order Challenge 想辦法使用 isolation 達到以下的結果： ⚠️ 先自己嘗試看看，再來看答案唷 😛
一直以來我都有更換自訂桌布的習慣，今天頻繁重開機發現在開機畫面時自訂桌布都沒有正確顯示 題外話：（今天在測 Raycast 發現他重開機總是不會open at login….總之又是另一個故事了 螢幕鎖定（左）/ 開機畫面（右） 這邊記錄一下目前是怎麼設定的 ⚠️ 本文撰寫時的 macOS 為 Ventura 13.3.1 步驟： 在第 4 步設定時，會把硬碟資料加密的功能關閉，如果對於資料安全有疑慮的話請自行謹慎考慮 參考資料：
首先，先破題這篇文章部分內容來自 What No One Told You About Z-Index – Philip Walton 的啟發 本來是想紀錄 position: sticky 的用法，但看了一下我過去的在 position 的文章中，其實少紀錄了 z-index 與 stacking context 的概念，因此來補坑一下 XD（謎之音：其實是覺得複雜懶得寫 QQ） 有趣的問題 首先我們來看看一個身為前端工程師應該會遇到的日常，我們有三個 position:absolute 的 div 分別為 Red（z-index）/ Green / Blue 的色塊 程式碼與實際畫面可參考 JSFiddle 範例： 問題：如何在不違反以下條件之下，將三個色塊的顯示順序更改為下圖的結果？ ⚠️ 在看程式碼的 CSS 之前，你可以嘗試自己在 JSFiddle 範例 中修改看看 預期結果如下： 解法： 我們只需要在 CSS 中為 div 加上以下程式碼即可 如果對於 […]
前兩週將機器從 ubuntu 14.04 更新為 ubuntu 22.04，發現每月執行的指令 certbot-auto renew 會噴以下錯誤 排查後發現 certbot 1.9.0 以後只支援 Debian / RHEL 版本的 linux OS certbot-auto was deprecated on all systems except for those based on Debian or RHEL. https://community.letsencrypt.org/t/certbot-1-9-0-release/135414 於是嘗試重新安裝 certbot 新版，由於我使用系統配置為 ubuntu / nginx，其他配置可以參考 官方安裝文件 嘗試執行 certbot certificates 即可正常執行了 ~ 參考資料：
如何設定 nginx 阻擋特定 ip / 網段存取，首先找到對應的 nginx configuration， 通常會在 /etc/nginx/sites-enabled/*.conf 或是預設的 /etc/nginx/nginx.conf 接著找到 server / location 區塊，加上 deny 語法
透過 bundler 安裝 ruby gem 時遇到了以上錯誤，仔細看 log 會發現有 解決方式： 安裝 xcode command line tools