前端
CSS field-sizing — 用一行 CSS 讓表單元素自動調整大小
textarea 自動調整高度，以前只能靠 JavaScript 監聽 scrollHeight。CSS field-sizing: content 一行就能取代，支援 textarea、input、select。本文整理舊做法的痛點與 field-sizing 的用法。
前端
2026
2025
2024
2023
前端
與程式有關的遊戲三選 (1) – A=B
本篇為 IT 2023 鐵人賽文章：與程式有關的遊戲三選 (1) – A=B
前端
比語意化標籤更重要的事
身為一位前端工程師，雖然我們不需要把全部的 HTML 標籤背得滾瓜爛熟，但是常見的 HTML 標籤與使用場景還是要有一定程度的了解，根據不同場景使用。 但是，使用語意化標籤的目的是什麼？我發現很多文章對於語意化標籤往往只停在表面，也就是討論某某標籤應該使用在哪裡，導致網頁上的標籤看似多彩繽紛，但使用者體驗卻沒有得到相對的提升。
前端
用 Astro 寫電子報網站
探討在建立電子報網站的需求，最後選擇了 Astro 來建立網站。這篇文章會探討與其他靜態網頁生成器的比較以及最後選 Astro 的原因。
2022
前端
2022 Advent Of Code: Cathode-Ray Tube
突然想到要紀錄自己覺得有趣的題目，尤其是可以視覺化的東西。如果有多餘的力氣就把每天的題目都寫成筆記。總之，我覺得 Advent Of Code Day10 的題目還蠻有趣的，所以就先記錄一下。
前端
HTML 和 CSS 能解決很多問題，但 JS 也很重要
在 2017 年時曾經讀過一篇文章，主要是分享各種用 HTML/CSS 就能達成的排版技巧。第一次閱讀時覺得深有同感，也學到很多當時還不熟的技巧，很推薦大家看看。雖然 JavaScript 幾乎可以解決大部分問題，但從無障礙設計的角度、效能跟 bundle size 的角度來看，能夠用 CSS 解決一定是比較好的。然而，盡量不要用 JS 不代表完全不用 JS，這兩者還是有些差別的。這篇文章會重新閱讀一次上面提到的文章，並且點出一些我覺得能夠改善的地方。
前端
排版時有用的 Pseudo 類別
用 CSS 排版時，我們會根據樣式使用對應的 CSS 處理，有時甚至需要使用 JavaScript 來完成，不過在 CSS 其實有許多 pseudo classes 只要善加利用可以簡化 CSS，也可以減少不必要的 JavaScript 實作，而且不再像過去一樣只有少數的瀏覽器有支援。
前端
用 Next.js 重寫整個部落格
記錄了將部落格從 Gatsby 遷移到 Next.js 的過程與感想。包含使用的技術以及實作細節等等。
前端
探討 Remix 的表單與資料讀取機制
雖然說可能不少人又會覺得「哎呀，怎麼又一個框架」，不過 remix 的確有它的獨特之處，如果有翻過文件而且追過最顯而易見的是
前端
node.js 讀取檔案時的細節
在 node.js 當中透過 fs 模組來操作檔案是相當常見的操作，然而如果在吞吐量比較大的情況下，任何有關 IO 的操作都應該非常小心
前端
將 Sentry 的 Web Vitals 整合到 slack
現在許多網站都會導入測量 Web Vitals 的流程，透過量化指標找到可以改善的地方。不過比較少人知道的是其實 sentry 在之前也推出了 Web Vitals 的統計功能，能夠統計 Web Vitals 的各個指標如 LCP、FP、CLS，讓開發者可以在後台看到相關的圖表，甚至把平均值都標好了，相當貼心。
前端
從前端視角看 SwiftUI
從 UI 的角度來看，前端與手機開發會遇到問題是類似的，儘管使用的語言或是開發手法不盡相同，我們都需要打造一個易用的使用者介面。既然如此，彼此也會遇到類似的問題，元件化開發、狀態管理、資料流、管理副作用（API 或是 IO）等等，對我來說是個很適合互相學習的領域。
2021
前端
如何用 WebGL 畫線
WebGL 不支援 lineWidth 大於 1 的線條，連 Three.js 也沒有支援可調整寬度的線條實作，於是開始了自製線條的實作
前端
如何判斷兩個網域的擁有者是否相同？
在瀏覽網頁時，我們時常透過 subdomain 來區分服務的內容，然而要區分一個網站是否為 subdomain，或是兩個網站是否為 SameSite 似乎沒有想像中的簡單。
前端
從 prismjs 改為 shiki
shiki 是一個將程式碼語法做高亮的套件，跟其他套件（highlightjs, prismjs）算是比較新一些，也比較少人知道。主要是因為它支援的語法更多也比較好設定，內建的主題也蠻多的，就順手把原本的 prismjs 換掉。
前端
useMemo 的幾個使用場景
在前端應用當中，很常會遇到一個情形是在畫面上顯示的值是透過其他的值複合計算而成；或是先經過某種計算再放入畫面當中。通常這類型的處理都可以用 useMemo 來簡化程式碼
前端
前端焦慮症
本篇文章僅為表達自身觀點與想法，對於同行業人員沒有任何批判之意。我認為目前前端領域（此處指網頁開發）逐漸趨於成熟，前端框架採用元件化的中心思想與響應式機制，搭配框架特有的語法、開發手法與哲學，可以應付大部分的使用場景。
前端
在瀏覽器上透過 Arduino 讀取溫濕度 - Web Serial API
Google Chrome 89 推出了 Web Serial API 讓外接設備透過瀏覽器 API 直接互動，包含 USB 設備或是有 Serial 介面的藍牙設備。這樣一來瀏覽器就能與硬體直接溝通。
前端
form 標籤與 FormData 的應用
本篇文章會介紹瀏覽器背後會怎麼處理 form 標籤，以及在 JavaScript 上怎麼運用 FormData 來簡化表單操作
前端
一起理解 HTML 當中的 Form Data
表單在網頁中是相當常見的應用，不只能夠傳輸純文字，也能夠達到檔案上傳的功能。不過也因為 form 的行為跟其他傳輸方式較為不同，有時候也產生疑惑與誤解。 這篇文章試著從閱讀規範理解來龍去脈後，深入理解 form 背後到底做了哪些事情，以及表單與其他傳輸方式的不同之處，最後再提及 HTML 的 form 標籤背後做了哪些事情。
前端
深入理解 Svelte（2）— 分析 Svelte 生成程式碼
從 Svelte 的核心理念可以得知，Svelte 希望從編譯過程中盡可能地獲取必要資訊，減少在動態的 overhead。上一篇文章中說明了 Svelte 從編譯到生成程式碼是如何運作的，今天要來觀察一下 Svelte 生成的程式碼是怎麼運作的。
前端
深入理解 Svelte（1）— Svelte 編譯過程
為了生成最後的程式碼，Svelte 必須將元件編譯一次獲取必要資訊，Svelte 的編譯過程到生成程式碼主要會通過幾個階段，在本篇文章會一一介紹
前端
2022 年值得學習 Svelte 的四個理由
Svelte 關注度逐年攀升，這篇文章整理了幾個 2022 年值得學習 Svelte 的理由，同時也會來談談 Svelte 使用上的缺點。
前端
深入理解 Svelte（0）— 什麼是抽象語法樹？
這一系列的文章以探討 Svelte 原理實作為主，希望能讓讀者對於 Svelte 的編譯機制與程式碼生成有更深入的理解。由於 Svelte 編譯過程涉及程式碼解析，因此這一篇文章主要會先討論抽象語法樹是什麼，並進一步說明抽象語法樹扮演的角色與重要性。
2020
前端
Hotwire 與 Turbolinks
Turbolinks 是一個 JavaScript 套件，通常會搭配 Ruby on Rails 一起使用（單獨當作函式庫使用也可以），主要是透過 fetch HTML 直接抽換的方式來避免直接換頁要重新發送請求、CSS 的成本。其實說「不需要使用 JavaScript」不完全正確，JavaScript 還是在，只是在函式庫那邊已經幫你處理好，所以開發上可以不用寫 JavaScript 而已。
前端
linaria - 不需要 runtime 的 CSS-in-JS 解決方案
linaria 是一個強調沒有 runtime 的 css-in-js 的函式庫，可以用與 styled-components 類似的語法，但是在編譯時期生成 CSS，進而減少動態修改樣式的 overhead
前端
對於 SSR 的思考與使用場景
在瀏覽器爬取網頁的時候，爬蟲會將網頁的 HTML 內容爬過後產生內容，也會作一份快取在資料庫當中並且定時更新。也就是說如果沒有實作 SSR 的話，那麼 html 檔案本身會是一片空白，需要等到 JavaScript 被解析且執行後才能看到實際頁面
前端
資料視覺化 — 台灣性侵害統計簿
這次想實作這個主題是因為看到新聞加上資料也相對齊全的關係，想說剛好也可以推廣 Svelte 本身，就一邊構想一邊把他實作出來了。
前端
Vue ref 語法糖與 Svelte
Vue 作者尤雨溪最近提出了一個 RFC，是關於 ref 宣告的語法中可以用 JavaScript 的 label statement 來進一步做簡化。這個語法跟 Svelte 如出一徹，在這邊紀錄一下自己的想法。
前端
Svelte Summit 2020 心得
Svelte 是我相當喜歡的前端框架之一，簡單的語法與彈性，作者的理念，還有各種動畫、過場的使用方式都讓我相當喜歡，之前也有寫過幾篇關於自己對 Svelte 的看法。這次 Svelte Summit 在 2020 年 10 月 18 日舉行，因為疫情的關係是以全程線上直播的形式播出，總共 7 個小時與 17 個演講。在這邊紀錄一些我覺得有趣的演講與自己的心得。
前端
iOS mousedown 事件觸發問題
iOS 在某些版本下 mousedown 處理器不會正確運作，不過在其他裝置上（像 Android 等等），mousedown 仍然是可以正確運作的。
前端
將數字加上 comma 的正規表達式
在一般顯示貨幣的時候通常會有一個需求，是將原數字轉成人類比較好看懂的格式，在前端當中我們可以用幾種方式達到，像是 Intl.NumberFormat 或是正規表達式等。
前端
關於 Cookie 與 CORS 的再思考
談談 SameSite 政策發布後，我對 Cookie 與 CORS 的再思考。Cookie 真的滴水不漏嗎？讓我們來看看一些案例。
前端
React 17 更新重點 - useEffect 的 clean up 函數時機改變
React 17 的發布沒有重大更新或是任何新功能，不過 useEffect 的 clean up 執行時機悄悄改變了。本篇文章不會一一解說每個更新，而是紀錄文章中比較值得關注的地方。
前端
前端應該學習 CS 嗎？
隨著瀏覽器可以做到的事情越來越多，前端能夠涵蓋的範圍也越來越廣了，光是前端這個名詞，可能就可以有多個分支
前端
科技始終來自於人性（Svelte Society: Frequently Asked Questions 筆記）
我在研究新的函式庫時，同時也會研究這個人（當然不是全部，不然一個 npm install 大概就要花一輩子去看了）。因為技術的創造者是人、函式庫的創造者是人、框架的創造者是人，大家都是有血有肉、有感情的人。
前端
從無到有寫一個 JSON 解析器（2）
在 part1 當中我們提到了如何撰寫一個 JSON 解析器，並實作解析字串的功能，接下來我們把其他函數補上。（事實上只要知道基本原理，剩下的函數實作都是照本宣科而已）
前端
從無到有寫一個 JSON 解析器（1）
今天會從解析 JSON 開始，講解如何從頭建立一個 JSON 解析器。由於 JSON 的架構簡單，很適合當作練習。
前端
如何用一行 CSS 做到 smooth-scroll
正當我開開心心用 svelte 實作了 smooth-scroll 之後，我發現其實可以用一行 CSS 達到
前端
Svelte 筆記（2）：編譯器比你聰明多惹
今天跑去看 Svelte 原始碼，摸熟架構的同時順便看看有沒有什麼簡單的 issue 可以拿來練手。
前端
Svelte 搭配 apollo-boost 時遇到的 rollup 錯誤
感覺 rollup 本身的機制還沒有 webpack 那麼齊全
前端
Svelte 筆記（1）- 沒有銀彈
但是 Svelte 走的路也註定會遇到一些問題，最主要的就是 Svelte 沒辦法在 runtime 當中幫你做太多事情。
前端
Svelte — 是什麼讓我遇見這樣的你
第一次看到 Svelte 時，心中想著「恩...又是一個新的前端框架了嗎？」，抱持著這樣的心情沒有在意太多。直到後來看到越來越多部落格文章介紹以及很多網站都在用之後，開始引起了我的好奇心。
前端
Chrome Cookie 政策調整與反思
其中從 Chrome 80+ 開始，會將 Cookie 當中的 samesite 預設設定為 lax。我們會從 samesite 的定義以及它有什麼用處，還有對 Cookie 的反思為出發點，談談我對整件事的想法。
2019
前端
深入前端開發
之前就希望能夠把一些關於前端開發的東西紀錄下來，不過一直沒有著手去做，趁著鐵人賽期間一口氣全部整理完。 這個系列分成了幾大部分，未來有機會會再繼續寫下去。 JavaScript 基礎 淺談 JavaScript 與 ECMAScript…
前端
migrate react-transition-group
react-transition-group 從 v1 升級到 v4 比較重要的有幾點： 升級後 CSSTransitionGroup 元件被移除了 leave 變成 exit transitionName 變成 classNames transitionEnterTimeout…
前端
從 class component 到 hooks
這篇文章並不會一一介紹各個 react-hooks 的 API，而是試著從設計的角度出發，來探討設計背後的原因。主要會分成幾個段落： Function Component 與 Class Component 的差異 如何在元件中複用類似的邏輯 淺談 high-order component…
前端
透過 overflow-anchor 實作 pin to bottom 元件
這篇文章是看完 Implementing a pin-to-bottom scrolling element with only CSS 後，並且介紹使用 JavaScript 的做法整理而成。 現在網頁越上越常出現每次加入新的內容時，就將 scroll 的位置調整到最底下。像是 Twitch…
前端
更安全的請求標頭 - Fetch Metadata Request Headers
有一天在開發頁面的時候，為了要檢查請求 Header 的欄位是否正確，打開開發工具一看，發現了請求多出了幾個可疑的 header： network 有注意到可疑的地方嗎？仔細一看發現，怎麼有三個以 Sec-Fetch…
前端
requestIdleCallback - 善用空閑時間
許多網頁當中都有各式各樣的 script 需要執行，當然也會有優先程度，像是比較重要的：渲染 UI，註冊相關的互動事件，呼叫 API 拿取資料等等是高優先的任務，而像是比較不重要的任務有：Analytic 的腳本、lazy loading、初始化比較不重要的事件。 怎樣才算 Idle…
前端
新的取消請求方式 - AbortController
在前端當中，我們主要可以透過兩種方式來發送請求：XHR 跟 Fetch。XHR 是從，嗯...，很久以前就有的 API。不過因為設定上很麻煩，所以時常被包裝成更高階的 API 使用，像是 jQuery 的 getJSON、axios、RxJS 的 AjaxObservable…
前端
和 CORS 與 cookie 打交道
CORS 與 cookie 在前端是個蠻重要的問題，不過大多數在開發的時候，因為前後端的 domain 時常是相同的，所以很少去 care 這些問題。或者只要要求後端將 Access-Control-Allow-Origin…
2018
2017
前端
Array.sort 淺析
Array.sort 淺析 這篇文章不是談論在 Javascript 原生的 sort 要注意的事項。例如： 因為預設的 sort 方法會把值轉為 String，並按照 char code 做排序，所以才會出現上面的結果。 今天要來探討 Javascript 的 sort 背後的實作方式
前端
如何設計恰如其分的表格
認清一件事實，table 是拿來看，不是被當作絢麗的視覺使用的 最近在後台頻繁有使用表格的需求，如何設計對使用者良好的 table 是一項挑戰，尤其在資料筆數多、欄位多的情況下，使用者很容易就會被額外的元素吸引。其實對於呈現資料上，table…
前端
React16 重點整理
react 終於正式發佈 v16 了，其實官方部落格的介紹已經相當完整（而且賞心悅目）。本篇文章作為筆記與統整，精簡了部分的細節。 1. componentDidPatch(error, info) react16 最亮眼的部分，加入 ErrorBoundary 的功能，確保在 lifecycle…
前端
2017 年前端面試心得
終於有時間整理最近的面試歷程了。先總結一些看到的事情： 通常公司面試只考 Javascript 的熟悉度，多數關於演算法或是解釋原型鍊等等，很少考 DOM 或是 Event 的操作。 幾乎不考 CSS，就算有也只是簡單判斷 class、ID 優先度這種基本題目而已。 沒有面試考 HTML…
前端
淺談 ramda 中的幾個 API
ramda 是個相當好用的函式庫，如果聽過 lodash 或是 underscore 的話，可以將 ramda 想成 functional programming 的 lodash，他們的 API 有許多相似性，差別在於 ramda 本身有 FP 的功能，任何的 API…
前端
IT 鐵人幫完賽心得
今天是鐵人賽的最後一天，感覺自己最後結尾的部分收得不是很好，也有很多部分都因為時間上的關係沒有很完整地介紹完。
前端
高度相同的排版解決方案
在前端的頁面中，我們經常會碰到需要相同高度的排版。最直覺的方法就是將容器裡的所有元素設為 float 或是 inline-block。 float 及 inline-block 如果是使用 float 排版，不但要先撐開父元素容器(clearfix)，還要針對子元素設定 margin…
2016
前端
CSS Variable 與 SASS Variable
之前寫過了一篇關於自己對 css variable 的想法，原本對這個屬性沒有抱持著太大的期待，自己用習慣了 SASS 變數也覺得這個 css variable 反而像個彆腳的 system，不過如果你也是這樣想的人，可以參考這篇文章
前端
令人期待的 PostCSS
從 SASS 到 PostCSS 大約在一年前，PostCSS 開始竄紅在前端生態圈裡，不外乎就是所謂的 preprocessor 的特性、高度客製化自己的 plugin、搶先使用 cssnext 的功能，還能夠搭配各種建構工具（gulp, webpack…
前端
快速變化下的前端思考
語意化、類別命名、事件傳播