SteepingLogic (Page 2)

用 Cloudflare Zero Trust 保護 Ghost 後台管理頁面

只需幾分鐘設定，讓 Ghost /ghost 路徑在進入前必須通過 Cloudflare Email OTP 驗證，免費且不影響讀者瀏覽。

Silver padlock on a metal gate symbolizing access control and security

Cloudflare Zero Trust 保護 Ghost 後台時，怎麼讓 API 發文不被擋？

把 Ghost admin 區放進 Cloudflare Access 之後，API 發文卻一直 302 到登入頁？問題不在 token，在 policy 的 Action 設成 Allow 而不是 Service Auth。一篇紀錄症狀、原因與最終的客戶端寫法。

Invoshot 給記帳士與會計師的發票辨識工具

會計工作裡最可惜的一件事，是專業的人花太多時間在不需要專業的地方。Invoshot 這套工具為的是想解決一件很乏味又費時的事：把發票和收據照片，轉成可以核對、修改、匯出的欄位資料，方便後續做計算和檢索

讓 terminal 看起來比較像自己的：簡單裝一下 Starship

Starship 是一個 terminal 小工具。可以幫你的命令列前面那一段資訊加做加強並上色。

MBTI 我變成Ｅ人了嗎？

重做 MBTI 後，結果從原本以為的 INTP 測成 ENTP。但差距其實很小，比起突然變外向，更像是我開始把腦中的想法丟出來，跟同事、工具、AI agent 互相刺激，再把它變成真的有價值的東西。

為什麼我做了 Gaze Guard：咖啡廳工作者的隱私保護工具開發緣起

在咖啡廳工作，最怕有人偷看螢幕。這篇文章記錄了 Gaze Guard 的開發緣起——一個用 Zero-Data 原則打造、完全本機運行的隱私保護 Chrome Extension。

Gaze Guard Power Draw: How Much Battery Does Running MediaPipe in a Chrome Extension Cost?

How much battery does running MediaPipe face detection in a Chrome extension cost? Measured SoC-level numbers comparing monitoring on vs. off, with a GPU/ANE breakdown.

Gaze Guard 耗電量實測：Chrome 擴充功能跑 MediaPipe 到底多耗電？

MediaPipe 在 Chrome Extension 背景持續跑人臉偵測到底多耗電？實測 SoC 層級數據，拆解 GPU/ANE 開銷。

Stop People Peeking at Your Screen: The Complete Gaze Guard Guide

Use your webcam to detect when someone is peeking at your screen — flash a visual alert or quietly switch tabs. All processing is local; frames never leave your device.

防止別人偷看螢幕：Gaze Guard 窺探守衛完整教學

用筆電鏡頭偵測有人偷看你的螢幕，觸發時跑出警示光或自動切換分頁。所有運算本機完成，畫面不外傳。從安裝、授權到偵測參數調校的完整教學。

9 種 AI 模型辨識台灣發票實測：Gemini、Claude、Gemma4、PaddleOCR 準確率、速度、費用完整比較

實測 9 種模型辨識台灣發票，gemini-3.1-flash-lite 以 1.8 秒、94.9% 準確率、費用便宜，拿下綜合第一，Gemma4:26b 卻意外輸給更小的 e4b。

具備權限檢查的 Cloud Run 建構

一個只會說 How do you do 的 Go 玩具服務，卻讓我把 Cloud Run IAM、Workload Identity Federation、ID Token vs Access Token 都研究了一遍。

程式

Linux 空間清理神器 ncdu

Linux 空間清理神器 ncdu 身為一個現代工程師，一定是要使用 AI 協助開發的，但上週使用到一半突然 AI 就卡住了，檢查是因為回傳的資料沒辦法 json parse。排查後發現原來是我的硬碟空間滿了 "Disk Usage: 100%" 的警報。於是我使用了 df -h 想找出是誰吃光了我的硬碟時，看到的不是熟悉的掛載點，而是一個讓人困惑的路徑：/dev/mapper/ubuntu--vg-ubuntu--lv。而且沒辦法再往裡面挖檔案，因為它是一個 Block Device。瞬間我傻了...這到底是什麼？我的空間都去哪了？用這篇文章來分享 AI 推薦給我的工具：ncdu，真的超方便！讓我相見恨晚的神器以前遇到空間不足，我總是傻傻地用 df + du -h 一層一層慢慢找。這種感覺就像是在大海撈針，撈到一半還會忘記剛剛哪個資料夾最大。

程式

自建 VPN 沒煩惱，OpenVPN + Proxmox 手把手教學

如果你想要快速的建立一個 VPN，這一篇很適合你！20 秒內建好一個 Ubuntu server，輕輕鬆鬆

程式

Laravel 串 GOOGLE 第三方登入 - Part 1 申請權限

現在的網站如果沒有做第三方登入感覺就落伍了。不過說真的，如果有第三方登入可以節省非常多的時間在打用戶資料，非常不友善，而且還要多記一組帳號密碼。像我自己本身就覺得每個網站都有自己的帳號密碼非常惱人，到底誰會記得！！！雖然到了 2024 年的今天，已經很多人有分享也有 AI 輔助了，不過我自己還是做個紀錄，畢竟對接的過程還是有遇到問題，花了一些時間在 debug 前置作業：申請網站驗證的權限要使用 Google 第三封登入需要有一些前置作業，首先要先連到 https://console.cloud.google.com/ OAuth 同意畫面進來後會像下面這張圖，然後要先去 OAuth 同意畫面接著就是照畫面上的只是填好資料按下一步，如果不知道怎麼填可以參考下圖測試的時候外部沒辦法連到這個 API，所以要先把自己的測試用帳號填寫上去，不然可是沒辦法順利得到回傳的完成後按下儲存，接下來就要設定憑證建立憑證接這滾輪往下滾會出現重新導向網址的設定重新導向 URL 重新導向的網址要填

演算法

Leetcode 題型分類與解題方向

我發現這些 leetcode 好像依照不同的題型會有類似的解法，所以請 AI 幫我統整每一個種類題型的解題方向。大致上可以分成 9 種類型，如果遇到這類型可以先往每個類別中列出的解題方法來思考，在這裡做個紀錄 1. Array Problems * Two Pointers: Used for problems like finding pairs, subarrays, or for partitioning arrays. * Example: 283 (Move Zeroes), 11 (Container With Most Water). * Sorting: Often needed before applying binary search or two-pointer techniques. * Example: 56 (Merge Intervals)

小韭菜開發日記

如何成功讓你的 Wordpress 網站被判斷為 Https 的安全網站

網站設置好以後過了幾天，即使我已經設定好了CA 憑證，瀏覽器左上角也變成鎖頭 SSL 連線加密模式了，Google Search Console 依然沒有辦法判定我的網站是 https 安全網站。應該也是有人跟我遇到相同的情況吧？這邊分享一下後來怎麼解決這個問題的 301 永久轉址首先就是先上我的網域，然後看看 http 未加密連線 http://my-domain 的請求有沒有被轉到 https 去有！很好，所以問題不是出在這裡。如果沒有的話可以參考這裡去設定： https://www.a2hosting.com/kb/security/ssl/redirecting-users-to-ssl-connections/ Mix content 使用工具 why no padlock 檢查原因根據官方的指引，可以使用這個網站來檢測是什麼問題造成沒有 https： https://www.whynopadlock.

程式

新作品 - 形象官網製作

最近完成了一個新作品：製作形象官網算是第一次製作別人的網站，中間遇到不少問題，還好關關難過關關過這篇要偷偷偷渡一下這個網站：翰瑀實業翰瑀實業 Subtitle for This Block 擁有多年的外銷經驗，幫助過許多台灣廠商快速上架到海外實體通路是你外銷路上的好夥伴，提供商品出口、通路上架以及行銷推廣的一條龍服務！因為大多都是靜態功能，所以選擇用一頁式網站呈現裡面用上了酷炫的幻燈片功能，讓照片以輪播除此之外還有圖片 fade in 的效果還另外設計了表單與收發信的功能整個從零開始慢慢長出來，感覺滿有成就感的～要是您也想製作類似的網站，可以來在下方留言 :)

程式

Laravel 服務容器化

開發的時候，都是直接在開發電腦上安裝 php, mysql, nodejs, nginx 但是要搬移到 server 的時候實在是痛苦不堪，所有的東西都要再安裝一次 php 尤其麻煩，還要安裝一堆擴充套件，要一個一個錯誤嘗試實在吐血想要解決這個煩人的問題，當然就是服務容器化啦！這樣以後要再次部署，但是那些 queue worker 要怎麼跑呢？放在跟主程式同一個 container 總覺得不太對勁，而且還不能平行擴展。還有那些排成怎麼辦呢？去 container 裡面設定 cronjob 嗎？還好已經有許多強者做過這樣的操作了，我只要照著做一遍就可以了。這裡提供我參考的網站，裡面寫得滿詳細的：Running the Laravel Scheduler and Queue with Docker 總結來說，就是讓每個 queue worker 去用跟 laravel server

程式

暴衝的硬碟使用量-binlog 大軍

使用 mysql v8 當資料庫，某一天查看硬碟使用量赫然發現竟然用了 100 多 GB 的空間！我就感到好奇了，我的總資料量也才 600MB，加上一些衍生計算和 index 應該也不會超過 5 GB 的使用量。所以我就開始檢查為什麼 mysql 會突然佔用了這麼多的空間。在 /var/lib/mysql 路徑底下多了好多個 binlog.XXXXXX 的檔案，每個檔案都不小。上網查詢後才知道這些是 mysql 的更新操作所產生的語法紀錄，是用來還原資料或是叢集資料庫架構所需要的紀錄檔案，但我只是單資料庫架構的話好像就不需要一直產生這樣的 log 出來。從網路上的資料看起來有幾種調整方式：調整 binlog_expire_logs_seconds 值，縮短過期清除時間默認是 2592000s => 30 天

程式

PHP 地雷篇: 神奇的 array_merge

相信很多使用 PHP 的朋友們都有使用過 array_merge 這個 function，不知道大家有沒有遇到下面這種情況 $arr1 = ['2023' => 'a']; $arr2 = ['2023' => 'A', '2024' => 'B']; $arr3 = array_merge($arr1, $arr2); 大家知道結果會是什麼嗎? 不囉嗦，直接上圖有什麼方法可以解決因為 is_numeric 的 index 造成的這種問題呢? 答案是：array + array 但是要小心 array