https://tzynwang.github.io/

1<!DOCTYPE html><html lang="zh-tw" class="bg-neutral-200 text-neutral-900 *:text-pretty dark:bg-neutral-700 dark:text-neutral-200 [&#38;_:is(h1,h2,h3,h4,h5,h6)]:my-6 [&#38;_:is(h1,h2,h3,h4,h5,h6)]:text-balance [&#38;_h1]:text-5xl/16 [&#38;_h2]:text-4xl/12 [&#38;_h3]:text-3xl/8 [&#38;_h4]:text-2xl [&#38;_h5]:text-xl [&#38;_h6]:text-lg [&#38;_hr]:my-6 [&#38;_:is(table,th,td)]:border [&#38;_:is(table,th,td)]:border-neutral-900 [&#38;_:is(table,th,td)]:p-2 dark:[&#38;_:is(table,th,td)]:border-neutral-200 [&#38;_table]:w-full [&#38;_del]:mx-0.5 [&#38;_del]:text-neutral-900/70 [&#38;_del]:line-through dark:[&#38;_del]:dark:text-neutral-200/75"> <head><!-- Global Metadata --><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.svg" type="image/svg+xml"><link rel="sitemap" href="/sitemap-index.xml"><meta name="generator" content="Astro v5.17.2"><!-- Primary Meta Tags --><title>普通文組 2.5</title><meta name="title" content="普通文組 2.5"><meta name="description" content="這是一個文組轉職前端工程師的技術部落格"><!-- Open Graph / Facebook --><meta property="og:type" content="website"><meta property="og:url" content="https://tzynwang.github.io/"><meta property="og:title" content="普通文組 2.5"><meta property="og:description" content="這是一個文組轉職前端工程師的技術部落格"><meta property="og:image" content="https://tzynwang.github.io/alexander-andrews-mEdKuPYJe1I.jpg"><!-- Twitter --><meta property="twitter:card" content="summary_large_image"><meta property="twitter:url" content="https://tzynwang.github.io/"><meta property="twitter:title" content="普通文組 2.5"><meta property="twitter:description" content="這是一個文組轉職前端工程師的技術部落格"><meta property="twitter:image" content="https://tzynwang.github.io/alexander-andrews-mEdKuPYJe1I.jpg"><!-- GSC verification --><meta name="google-site-verification" content="VEtprY6Mg0dYcw0VAEYAu_Btg_JvCVg1tl_gKrS4CNI"><!-- Font --><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet"><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate">

1<script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.CDGfc0hd.js"></script>

1<!-- Google Tag Manager -->

1<script>(function(){const ga4Id = "G-6QC9CKHCTY";
2
3      (function (w, d, s, l, i) {
4        w[l] = w[l] || [];
5        w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
6        var f = d.getElementsByTagName(s)[0],
7          j = d.createElement(s),
8          dl = l != "dataLayer" ? "&l=" + l : "";
9        j.async = true;
10        j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
11        f.parentNode.insertBefore(j, f);
12      })(window, document, "script", "dataLayer", ga4Id);
13    })();</script>

13<!-- Google tag (gtag.js) -->

13<script async src="https://www.googletagmanager.com/gtag/js?id=GTM-KM9SGJLK">(function(){const gTagId = "GTM-KM9SGJLK";
14})();</script>

14<script>(function(){const ga4Id = "G-6QC9CKHCTY";
15
16      window.dataLayer = window.dataLayer || [];
17      function gtag() {
18        dataLayer.push(arguments);
19      }
20      gtag("js", new Date());
21      gtag("config", ga4Id);
22    })();</script>

22<link rel="stylesheet" href="/_astro/_path_.C-rzvVe6.css"></head> <body> <section class="m-6 sm:mx-auto sm:max-w-[60ch]"> <h1>普通文組 2.5</h1> <nav class="flex items-center gap-4"> <a href="/" class="text-teal-800 dark:text-teal-300">首頁</a> <a href="/archive" class="text-teal-800 dark:text-teal-300">全文章歸檔</a> <a href="/tag" class="text-teal-800 dark:text-teal-300">以標籤檢視</a> <a href="/rss.xml" class="text-teal-800 dark:text-teal-300">RSS</a> </nav> </section> <main class="m-6 sm:mx-auto sm:max-w-[60ch]">   <div class="space-y-8"> <section class="space-y-2"> <img src="/2025/css-grid-minmax/伸縮自如的愛.jpeg" alt="" class="block aspect-video w-full object-cover"> <h2 class="relative text-teal-800 dark:text-teal-300"> 以 minmax() 來實作伸縮自如的容器<a href="2025/css-grid-minmax" class="GA4-read-post absolute inset-0"></a> </h2> <time class="block">2025-11-09 14:17</time> <nav class="flex items-center gap-2"> <a class="relative inline-flex items-center bg-teal-800 px-2 py-1 text-sm text-neutral-50 transition-colors dark:bg-teal-300 dark:text-neutral-800" href="/tag/CSS"> CSS </a> </nav> <p>如果你需要根據內容多寡來動態調整一個元件的尺寸，但這個元件又有一個必須遵守的最大尺寸限制，那 minmax() 應該會是你的好朋友。而如果你看不懂前面那句話到底在公尛，那歡迎點開這篇文章看一下範例，大概就會懂了 🌚</p> </section><section class="space-y-2"> <img src="/2025/book-the-rules-of-programming/屌虐.png" alt="" class="block aspect-video w-full object-cover"> <h2 class="relative text-teal-800 dark:text-teal-300"> 《程式設計守則》——簡單就是最好<a href="2025/book-the-rules-of-programming" class="GA4-read-post absolute inset-0"></a> </h2> <time class="block">2025-10-19 15:38</time> <nav class="flex items-center gap-2"> <a class="relative inline-flex items-center bg-teal-800 px-2 py-1 text-sm text-neutral-50 transition-colors dark:bg-teal-300 dark:text-neutral-800" href="/tag/閱讀筆記"> 閱讀筆記 </a> </nav> <p>老菜鳥咸宜的開發常識讀本。一句話總結整本書就是「如果它簡單、好懂，沒有任何 bug 且遵照團隊規範，那這就是好程式碼。」如果你想知道為什麼是這些是製造美好程式碼的必要成分，那歡迎點開這篇文章繼續讀下去。</p> </section><section class="space-y-2"> <img src="/2025/js-copy-rich-content/spider-man-point-each-other.jpg" alt="" class="block aspect-video w-full object-cover"> <h2 class="relative text-teal-800 dark:text-teal-300"> 如何複製帶格式的文字（rich content, rich text copy）<a href="2025/js-copy-rich-content" class="GA4-read-post absolute inset-0"></a> </h2> <time class="block">2025-09-07 18:17</time> <nav class="flex items-center gap-2"> <a class="relative inline-flex items-center bg-teal-800 px-2 py-1 text-sm text-neutral-50 transition-colors dark:bg-teal-300 dark:text-neutral-800" href="/tag/JavaScript"> JavaScript </a> </nav> <p>終極懶人包：在使用 navigator.clipboard.write 複製網頁上的文字（附帶格式）時，要同時提供 text/html 和 text/plain 型態的內容，不然無法對純文字編輯器進行貼上。</p> </section><section class="space-y-2"> <img src="/2025/css-tab-switch-anchor-position/armands-brants-BX8w_quWj_c-unsplash.jpg" alt="" class="block aspect-video w-full object-cover"> <h2 class="relative text-teal-800 dark:text-teal-300"> 用 CSS anchor function 實現 Tab 元件滑動效果<a href="2025/css-tab-switch-anchor-position" class="GA4-read-post absolute inset-0"></a> </h2> <time class="block">2025-08-31 10:13</time> <nav class="flex items-center gap-2"> <a class="relative inline-flex items-center bg-teal-800 px-2 py-1 text-sm text-neutral-50 transition-colors dark:bg-teal-300 dark:text-neutral-800" href="/tag/CSS"> CSS </a> </nav> <p>優點：你可以少寫很多程式碼；缺點：火狐還不支援</p> </section><section class="space-y-2"> <img src="/2025/remix-google-analytics/it-works-why.jpg" alt="" class="block aspect-video w-full object-cover"> <h2 class="relative text-teal-800 dark:text-teal-300"> 如何指南：在 React Router v7 Framework 模式下，設定 Google Analytics (gtag)<a href="2025/remix-google-analytics" class="GA4-read-post absolute inset-0"></a> </h2> <time class="block">2025-08-17 10:32</time> <nav class="flex items-center gap-2"> <a class="relative inline-flex items-center bg-teal-800 px-2 py-1 text-sm text-neutral-50 transition-colors dark:bg-teal-300 dark:text-neutral-800" href="/tag/React Router v7"> React Router v7 </a><a class="relative inline-flex items-center bg-teal-800 px-2 py-1 text-sm text-neutral-50 transition-colors dark:bg-teal-300 dark:text-neutral-800" href="/tag/Remix"> Remix </a> </nav> <p>

22早點想到用 import.meta.env 帶入環境變數，事情應該就不會那麼複雜了吧 😶‍🌫️</p> </section><section class="space-y-2"> <img src="/2025/css-grid-template-columns-container-max-width/let-me-in.jpg" alt="" class="block aspect-video w-full object-cover"> <h2 class="relative text-teal-800 dark:text-teal-300"> 以 grid-template-columns 來限制最大容器寬<a href="2025/css-grid-template-columns-container-max-width" class="GA4-read-post absolute inset-0"></a> </h2> <time class="block">2025-07-29 18:45</time> <nav class="flex items-center gap-2"> <a class="relative inline-flex items-center bg-teal-800 px-2 py-1 text-sm text-neutral-50 transition-colors dark:bg-teal-300 dark:text-neutral-800" href="/tag/CSS"> CSS </a> </nav> <p>在需要同時處理 overflow 和 filter drop-shadow 時，平常慣用的 max-width 配 margin-inline 的寫法可能會讓陰影⋯⋯看起來有點問題 🌚</p> </section><section class="space-y-2"> <img src="/2025/css-transform-order-matters/Las_Meninas.jpg" alt="" class="block aspect-video w-full object-cover"> <h2 class="relative text-teal-800 dark:text-teal-300"> 變形的秩序（CSS transform order matters）<a href="2025/css-transform-order-matters" class="GA4-read-post absolute inset-0"></a> </h2> <time class="block">2025-07-05 18:40</time> <nav class="flex items-center gap-2"> <a class="relative inline-flex items-center bg-teal-800 px-2 py-1 text-sm text-neutral-50 transition-colors dark:bg-teal-300 dark:text-neutral-800" href="/tag/CSS"> CSS </a> </nav> <p>你知道嗎，CSS `transform` 的順序會影響元件的變形結果。</p> </section><section class="space-y-2"> <img src="/2025/book-being-geek/gerald-schombs-BqySllTmBhk-unsplash.jpg" alt="" class="block aspect-video w-full object-cover"> <h2 class="relative text-teal-800 dark:text-teal-300"> 你現在在做什麼？不要找藉口——《晉身怪傑》書摘<a href="2025/book-being-geek" class="GA4-read-post absolute inset-0"></a> </h2> <time class="block">2025-06-22 07:43</time> <nav class="flex items-center gap-2"> <a class="relative inline-flex items-center bg-teal-800 px-2 py-1 text-sm text-neutral-50 transition-colors dark:bg-teal-300 dark:text-neutral-800" href="/tag/閱讀筆記"> 閱讀筆記 </a> </nav> <p>雖然是 15 年前的書了，但有些內容對現代工程師還是有當頭棒喝的效果。總之先記下來提醒自己不要過得太安逸。</p> </section><section class="space-y-2"> <img src="/2025/writing-for-developers-how-to-write/妳懂不懂觀眾要的是什麼啊.png" alt="" class="block aspect-video w-full object-cover"> <h2 class="relative text-teal-800 dark:text-teal-300"> 我該怎麼寫？——&quot;Writing for Developers&quot; 閱讀筆記，寫那些讀者想看的東西<a href="2025/writing-for-developers-how-to-write" class="GA4-read-post absolute inset-0"></a> </h2> <time class="block">2025-06-15 08:24</time> <nav class="flex items-center gap-2"> <a class="relative inline-flex items-center bg-teal-800 px-2 py-1 text-sm text-neutral-50 transition-colors dark:bg-teal-300 dark:text-neutral-800" href="/tag/閱讀筆記"> 閱讀筆記 </a><a class="relative inline-flex items-center bg-teal-800 px-2 py-1 text-sm text-neutral-50 transition-colors dark:bg-teal-300 dark:text-neutral-800" href="/tag/關於寫作這件事"> 關於寫作這件事 </a> </nav> <p>你可以把這篇文章視為 2024 年的寫作 SOP 上下篇 remake 版。除了關於「如何寫」的精華回顧之外，也追加收錄 "Writing for Developers" 一書的「如何寫出受歡迎文章」的寫作技巧。而如果你真的連讀完這篇文章的時間都沒有，那壓縮到極致的懶人包就是——在寫作時以「滿足讀者的需求」為終極目標，並確保讀者能發現文章 🌤️</p> </section><section class="space-y-2"> <img src="/2025/writing-for-developers-what-to-write/拜託讓我遺忘那又羨又恨的愛吧.jpg" alt="" class="block aspect-video w-full object-cover"> <h2 class="relative text-teal-800 dark:text-teal-300"> 我該寫什麼？——&quot;Writing for Developers&quot;

22 閱讀筆記，日常的又恨又愛<a href="2025/writing-for-developers-what-to-write" class="GA4-read-post absolute inset-0"></a> </h2> <time class="block">2025-04-22 19:37</time> <nav class="flex items-center gap-2"> <a class="relative inline-flex items-center bg-teal-800 px-2 py-1 text-sm text-neutral-50 transition-colors dark:bg-teal-300 dark:text-neutral-800" href="/tag/閱讀筆記"> 閱讀筆記 </a><a class="relative inline-flex items-center bg-teal-800 px-2 py-1 text-sm text-neutral-50 transition-colors dark:bg-teal-300 dark:text-neutral-800" href="/tag/關於寫作這件事"> 關於寫作這件事 </a> </nav> <p>這篇是我在看完 "Writing for Developers" 後，整理出「什麼可以成為技術寫作題材」的相關筆記。不論是剛開始寫作的新手，或是想讓自己的技術文章能受歡迎的歷戰工程師，應該都能從這篇筆記裡撈到一些靈感吧 🌚</p> </section> </div>   <footer class="p-8 text-center">
23Tzu Yin (Charlie) 🦊 Made in Taiwan
24</footer> </main> <!-- Google Tag Manager (noscript) --> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KM9SGJLK" height="0" width="0" style="display:none;visibility:hidden"></iframe> <!-- End Google Tag Manager (noscript) --> </body></html>