過去剛開始接觸 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