2024年CSS終於實現垂直置中
2024 年起，align-content 終於可以在塊級佈局裡運作了。在這之前，想單靠一個屬性垂直置中是辦不到的，你得先把容器換成 Flexbox 或 Grid。 123<div style="align-content: center; height: 100px;"> <code>align-content</code> 現在可以直接使用了！</div> 注意上面那個 height: 100px，它不是裝飾。align-content 做的事情是「把內容在 block 軸上的剩餘空間裡分配」，前提是容器得真的有剩餘空間。普通的塊級元素高度是 auto，會被內容撐到剛剛好、一點空間都不剩，這時候寫 align-content: center 不會有任何視覺變化。要看到效果，容器至少要有明確的 height、min-height，或是被外層（例如 grid track、flex item）給定一個比內容更大的高度。這個前提我第一次踩到時找了快二十分鐘，明明屬性寫對了卻沒反應。 瀏覽器支援狀況：Chrome ...
Docker 容器化進階：自動化部署與 CI/CD 實戰指南
本文承接從零開始的 Docker 容器化指南，主要討論如何實現全自動化的 Docker 部署流程。透過整合 GitHub Actions、Docker Hub 和自動化工具，我們可以實現程式碼推送後自動更新生產環境的目標。 目錄 自動化部署概述 GitHub Actions 設定 自動更新容器設定 零停機部署策略 備份與還原機制 監控與告警設定 故障排除與回滾流程 最佳實踐建議 自動化部署概述完整的自動化部署流程包含以下步驟： 開發者推送程式碼到 GitHub GitHub Actions 自動執行測試和建置 建立新的 Docker 映像檔並推送至 Docker Hub 生產環境自動偵測並更新容器 健康檢查確認部署狀態 部署流程圖graph TD A[開發者推送程式碼] --> B[GitHub Actions 觸發] B --> C[執行測試] C --> D[建立 Docker 映像檔] D --> E[推送至 Docker Hub] E --> F[生產環境更新] F --> G[健康...
Mojo 號稱比 Python 快幾萬倍：拆解這個數字，認識這個語言真正的樣子
Mojo 常被說成「Python 的寫法、C 等級的速度」，但這句話少講了很多條件。它最常見的兩個賣點——比 Python 快幾萬倍、完全相容 Python——前者是真的但前提很窄，後者其實是早期說法、Modular 後來自己已經修正。 先把 Mojo 是什麼講清楚，再一條一條看這些數字和說法的前提。 Mojo 是什麼Mojo 由 Chris Lattner 主導開發。他做的東西你大概天天間接在用——LLVM 是一票現代編譯器和語言共用的底層基礎設施，而 Lattner 正是 LLVM 的作者，也是 Swift 語言的設計者。他的公司 Modular 想解決的問題是：AI 和高效能運算長年卡在「Python 好寫但慢、C++ 快但難寫」的二選一，Mojo 想兩邊都要。 做法是語法走 Python 風格，讓熟悉 Python 的人快速上手；底層接 MLIR，能編譯成接近原生的機器碼，還內建型別系統和向量化支援。 「快幾萬倍」的前提先說那個最聳動的數字。Modular 官方拿來宣傳的招牌是 Mandelbrot 計算，Mojo 比 Python 快約 35000 倍。 這數字是真的，...
從零開始的 Docker 容器化指南: Vue3 + .NET Core + SQL Server
目錄 Docker 基礎概念 環境準備 SQL Server 容器設定 .NET Core API 容器化 Vue3 前端容器化 使用 Docker Compose 整合服務 資源管理與監控 開發環境設定 網路配置 部署與維護 常見問題與解決方案 Docker 基礎概念Docker 是一個開放原始碼的容器化平台，把應用程式和它的依賴項打包成獨立容器，讓同一份設定在本機開發、測試機、正式環境都能跑出相同結果。 這套技術組合讓你少踩的坑：「我本機跑得起來但 CI 就壞了」基本上絕跡、新人 onboarding 不再花一天裝環境、版本升級可以先切新容器測試再切流量。代價是要花時間學 Dockerfile 和 Compose 的寫法——這篇就是從這裡開始。 環境準備 安裝 Docker Desktop 12345678# Windows/Mac 下載並安裝 Docker Desktophttps://www.docker.com/products/docker-desktop/# Linux (Ubuntu) 安裝 Docker Enginesudo apt updatesudo ap...
SQL 查詢優化案例研究：提升水位監測系統性能
背景水位監測系統的主查詢開始出現「執行逾時到期。在作業完成之前超過逾時等待的時間，或是伺服器未回應。」，這是應用層的 CommandTimeout（預設 30 秒），一旦觸發就連帶觸發 LINE 通知錯誤，警報不斷。 初始情況系統概況 共 120 個監測站點（stt_no） 每 10 分鐘向 WaterLevelGaugeHistory 匯入一次資料，觀察時已累積逾 500 萬筆 需要查詢每個站點最近 24 小時的最新一筆 原始查詢執行時間約 1 分鐘以上： 12345678910111213SELECT DISTINCT WL.[ID], WL.[stt_name], /* 其他欄位 ... */ WLH.[measure_time], WLH.[val], WLH.[Status], WLH.cstatus, WLH.[Epower], WLH.nodataFROM [dbo].[WaterLevelGauge] WLLEFT JOIN [dbo].[WaterLevelGauge_detailed_View] WLD ON WL.[stt_name]...
WebSocket 教學：用 Python 與 JavaScript 建一個即時聊天室
聊天室、協作編輯、即時看盤，這些功能的共通點是伺服器要能主動把資料推給瀏覽器，而不是等瀏覽器來問。HTTP 的請求-回應模型做不到這件事，硬要做就得靠輪詢，每隔幾秒打一次 API，既浪費頻寬又有延遲。WebSocket 就是為了解決這個問題而生的：一條 TCP 連線上跑全雙工通訊，兩邊都能隨時送資料。 這篇用 Python 寫後端、原生 JavaScript 寫前端，建一個能在多個瀏覽器分頁之間互傳訊息的聊天室。程式碼都是可以直接跑的，而且特別避開了 websockets 套件新版本上的幾個地雷——網路上很多教學還在用舊版 API，照抄到新環境會直接報錯。 WebSocket 到底是什麼WebSocket 是一個獨立的網路協定（ws:// 或加密的 wss://），握手階段借用 HTTP 升級連線，握手完成後就脫離 HTTP，變成一條雙向的長連線。 跟輪詢比起來，它的好處很實際： 伺服器能主動推播，不必等客戶端發問 連線建立後省掉每次 HTTP 標頭的開銷 延遲低，適合聊天、通知、即時資料這類場景 要注意的是 WebSocket 不會自動重連，連線斷了就是斷了，這部分要自己處...
使用 SQL Server Resource Governor 限制特定資料庫的資源使用
1. 背景某次正式環境使用者抱怨網頁速度極慢，卡了好幾分鐘，我連上 SSMS 查詢也一樣卡。追查後發現另一個專案的排程在跑，瘋狂吃 CPU 和記憶體，把整台 SQL Server 拖垮。理想解法是切獨立主機，但沒有資源時，Resource Governor 是次佳選項——不需重建環境，直接在現有執行個體限制特定資料庫的耗用量。 版本限制（重要）： Resource Governor 在 SQL Server 2022 及以前僅支援 Enterprise 與 Developer Edition，Standard Edition 不支援。若在 Standard 上執行下列指令會直接報錯，請先用 SELECT SERVERPROPERTY('Edition') 確認版本再繼續。 2. Resource Governor 的核心概念Resource Governor 管理的單位有三層： **資源池 (Resource Pool)**：定義 CPU 與記憶體的用量上限，可建立多個池子分別對應不同優先級的工作負載。 **工作負載群組 (Workload Group)**：關...
深入解析:使用Python構建全面的市場風險監測工具
專案網址 深入解析:使用Python構建全面的市場風險監測工具七月全球同步發生多個利空事件，市場下殺速度快到根本來不及反應，直接被套牢。事後想想，如果有個工具能在風險累積時提早示警，也許不會這麼狼狽。於是花了幾個週末做了這個 VolatilityVigil——用 Python 同時監測多個市場的風險狀態，從波動度計算到 PCA 異常偵測，最後用 K-means 把市場分群，輸出一張能看懂的熱力圖。 1. 程式概述核心功能分五塊： 透過 yfinance 抓 Yahoo Finance 多市場歷史資料（美股、歐股、亞股、商品、外匯） 計算各市場的年化波動度 用 PCA 重建誤差做異常偵測 整合波動度與異常訊號算出風險評分 用 K-means 把市場狀態分群，並將群號整合進最終判讀輸出 用到的套件：pandas（資料處理）、sklearn（演算法）、yfinance（市場資料）、matplotlib 與 seaborn（視覺化）。 2. 核心功能詳解2.1 資料獲取先把整份程式會用到的 import 一次列齊，免得你抄到一半發現少了哪個套件： 1234567891011121...
為什麼你應該使用Docker？
Docker 現在幾乎是開發環境的標準配備。無論你是開發者、系統管理員，還是 DevOps 工程師，花時間理解它帶來的好處都值得。這篇文章整理了幾個最實際的理由，說明為什麼要把 Docker 加進你的工作流程。 1. 一致的開發環境Docker 最直接的好處是讓所有人在同一個環境裡工作，不管跑的是 Windows、macOS 還是 Linux。 消除「在我的機器上可以跑」的問題： Docker 容器把應用程式和它的所有相依套件一起封裝，確保在任何地方都以相同方式執行。 加速新人上手： 新加入的成員不需要花幾個小時自己對齊環境設定，拉下映像檔就能動工。 環境版本化： 不同專案需要不同版本的 runtime 或工具，切換起來不會互相干擾。 2. 提高部署效率從開發到生產的遷移，過去有一大塊時間耗在環境差異上。容器化之後這個問題幾乎消失。 快速部署： Docker 映像檔可以在幾秒內啟動，大幅壓縮部署等待時間。 可移植性： 容器可以在任何支援 Docker 的系統上執行，不需要擔心底層基礎架構的差異。 擴展性： 搭配 Docker Swarm 或 Kubernetes，水平擴展不...
從Newtonsoft.Json遷移到System.Text.Json的經驗分享
為什麼要換.NET Core 之後，Microsoft 把 System.Text.Json 直接內建進框架，不用另外裝 NuGet 套件，少一個外部相依。效能上，官方 benchmark 顯示序列化速度比 Newtonsoft.Json 快約 2 倍，記憶體分配也更省。對大多數 Web API 專案來說，日常夠用。 真正讓人猶豫的是行為差異。兩套函式庫有幾個預設值不一樣，遷移時踩到的坑大多出在這裡。我前後把幾個中型 API 專案換過來，下面這幾個點是實際撞到、查到根因才搞定的。 坑一：JSON 輸出變成小駝峰問題現象把序列化從 Newtonsoft.Json 換成 System.Text.Json 之後，原本 "UserName" 這類 Pascal Case 輸出，跑到 ASP.NET Core Web API 回傳時突然變成 "userName"，前端開始炸。 真正的原因這個問題有個很容易踩的誤區：System.Text.Json 函式庫本身的預設 PropertyNamingPolicy 是 null，也就是保持原始屬性名稱不變。...
