Camel 's blog

Technical notes written freely.

[css] position: sticky

今天來介紹 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

介紹一個不常見的 css 屬性 isolation,可以簡單地幫你建立新的 stacking context 如果你還不知道什麼是 stacking context,可以先參考 這篇 那建立新的 stacking context 可以做什麼呢?可以幫你和其他層的 mix-blend-mode / z-index 等等數值作字面上的意思 “隔離” 主要有兩種值: 目前這個屬性支援度算是相當普及了(96%) 如果看完這個屬性,你還是不知道他可以用來做什麼,那你可以試著玩看看 Stacking Order Challenge 想辦法使用 isolation 達到以下的結果: ⚠️ 先自己嘗試看看,再來看答案唷 😛

[mac] Macbook 開機桌布更換

一直以來我都有更換自訂桌布的習慣,今天頻繁重開機發現在開機畫面時自訂桌布都沒有正確顯示 題外話:(今天在測 Raycast 發現他重開機總是不會open at login….總之又是另一個故事了 螢幕鎖定(左)/ 開機畫面(右) 這邊記錄一下目前是怎麼設定的 ⚠️ 本文撰寫時的 macOS 為 Ventura 13.3.1 步驟: 在第 4 步設定時,會把硬碟資料加密的功能關閉,如果對於資料安全有疑慮的話請自行謹慎考慮 參考資料:

[css] 你從未瞭解的 z-index / stacking context

首先,先破題這篇文章部分內容來自 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] certbot cannot import name _remove_dead_weakref

前兩週將機器從 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] 如何讓 $remote_addr 辨認出正確的 client 端 ip 而不是 cdn(cloudflare) ip

當在架設網站時,時常會幫網站前面架設一層 cdn(cloudflare),好處是 cdn 作為第一層接收使用者端的請求既可以隱藏伺服器真實 ip,更可以加速各地區的網站載入速度。 反之,多了一層 cdn 可能讓你更難存取到真實的使用者資訊,比如導致在網頁伺服器看到的 access.log 其中 $remote_addr 都是來自 cdn 廠商的 ip,例如:162.158.162.90 造成這個問題的原因,可以參考以下圖片的流程: 原來的使用者 IP 為: 1.1.1.1 / 2.2.2.2 由於經過 cloudflare 的 cdn 伺服器(4.4.4.4)存取後,導致 Logs 充斥 4.4.4.4 的 $remote_addr 為了解決這個問題 cloudflare 官方有提供在各網頁伺服器該如何設定正確的 mods 解決此問題 這邊以 ubuntu 的 nginx 設定為例 2. 重新讀取 nginx 設定 設定大功告成 ~ 重新檢查 access.log 的 $remote_addr 是否後就會正確抓到使用者 ip 了 […]

[htop] 如何看 cpu load 狀態

常常在看機器目前負載狀態時,總是會先看 cpu / memory 的使用量,但在 cpu 上有些數字代表指標 記錄一下每個數字的意義 ~ 之後忘記可以查 XD 舉個例子: 以上這張圖透露了以下資訊: 此機器 cpu thread count 為 8若要查實體 cpu count 為多少可以使用 sysctl -a | grep machdep.cpu.core_count cpu 使用量, process 依照優先權重分別為 紅(kernel) > 黃(user) > 綠(user) process memory 使用量,綠色為 process, 藍/橘則為 buffer 或 disk cache 使用的 memory swap 使用量,通常在記憶體不夠用時會使用硬碟空間作為記憶體使用 目前機器上有 588 tasks, 2594 threads, 1 […]