Hi！這裡是 Jing Tech 前端技術週報！除了 Substack 電子報外，也可以在筆者的部落格 jing-tech.me 與 instagram: jing.tech 關注前端大小事！
本週前端技術週報是在台中的 ATC Cafe 完成的，雖然平常沒有去咖啡廳的習慣，但這次體驗非常讚，空間大也不會很吵，或許之後可以考慮多嘗試不同的咖啡廳！
本週熱點與選讀
文章
近期的週報經常提到以 Rust 為底層建立的 JavaScript 工具。幾年前，若想用 Rust 創建 JavaScript 的小工具，往往會因為缺乏相容的底層 API 而寸步難行。然而，現在不一樣了。我們可以利用這些底層工具提供的 API 來打造自己的工具，而文章就介紹如何透過 OXC 與 napi-rs 的 API 從 0 到 1 建立一個變數計算器。如果讀者想要更進階一點的，可以看看這個 repo，學習如何使用 swc.rs 並通過一個檔案實作簡易的打包器。
Rethinking Text Resizing on Web
Airbnb 分享他們如何透過 rem 作為字體單位來解決在縮放網頁時網頁無法同時進行響應。目地是為了強化網頁的無障礙 (Accessibility) 來幫助視力障礙的使用者能夠更清楚地閱覽網站。在這過程中需要讓工程與設計團隊達成共識、進行功能遷移以及如何兼容各瀏覽器有不同的行為來達到一致的使用者體驗。
BYOBC: Bring your own base class
隨著 React 19 支援 Web Component 後，可以說它在任何主流框架都可以無痛使用 [Source]，但筆者當初在學習 Custom Elements API 時，發現其缺點之一是使用起來不夠直觀。而這篇文章介紹如何封裝繁瑣的邏輯，讓在開發上能夠更順暢，可以在不使用 Lit 這類的套件也可以順利地開發 Web Component。
A virtual DOM in 200 lines of JavaScript
推薦給對 Virtual DOM 想要有更深了解的讀者！此外 bigfrontend.dev 也有針對 Virtual DOM 所出的一系列題目，也很推薦練習看看。
Migrating from Radix to React Aria: Improving Accessibility and UX
文章分享了為什麼要從其他 UI Library 遷移到 React Aria，點出了其優點以及在這過程中遇到的一些困難。
影片
李弘毅教授總是能用很有趣的方式講解 AI 相關知識，儘管 OpenAI 沒有發表 GPT-4o 背後的實踐技術，但對前幾週發表 GPT-4o 有興趣的讀者可以聽聽教授對該技術如何實踐的猜測。
Podcast
devtools.fm | Solomon Hykes - Docker, Dagger, and the Future of DevOps
Solomon Hykes 是 Docker 的共同創辦人，這期節目談到了 Docker 當初如何成立、想要解決什麼、在開源下兼顧公司的成長以及介紹他目前正在做項目 Dagger 與對 DevOps 未來展望。
Meta Tech Podcast | The key to happy Rust/C++ relationship & Building Threads for web
最近才發現 Meta 有開 Tech Podcast，這週聽的這兩集都還蠻不錯的，推薦給大家～
本週 Jing Tech
這裡會列出近期 Jing Tech 部落格發布的新文章，與 Jing Tech 的技術週報不同，部落格中包含了更多的程式互動範例，讓讀者能夠更容易地理解。非常歡迎讀者反饋與指教！
Jing Tech 部落格的改版進度終於完成 80%，目前會先在 v2.jing-tech.me 進行測試，由於許多文章內容需要進行遷移與重新校正，還有一些想要新增的功能，預計在這個月底才會正式移到 jing-tech.me，非常歡迎各位讀者給予回饋與建議！
動機
這次改版的動機主要是覺得 jing-tech.me 目前整體的 UI Layout、SEO 以及互動性都有很多地方可以改進，也剛好發現一個非常喜歡的部落格設計 (onur.dev)，所以決定用每日下班後的一些時間來進行改版。
使用者介面
基本上就是模仿 onur.dev 進行使用者介面的改版，同時加入了一些自己的想法。
首頁
文章列表
主題頁面
如何建立？
隨著越來越多部落格模板的出現，讓建立部落格這件事變得非常簡單，同時也可以透過每次的改版加入一些自己想要學習的技術。這次主要參考了onur.dev 的設計以及 tailwind-nextjs-starter-blog 所內建的功能 (像是搜尋、留言以及深淺色等這個 starter 都有)。
在 v2 也延續了原版的 jing-tech.me 加入了 Sandpack，主要是強化閱讀程式碼時的互動性。
整體的使用體驗與一些小設計上可以透過 shadcn/ui, v0.dev 與 github coplit 來完成，透過它們可以快速的完成 UI。
Icon 部分非常推薦 lucide 其涵蓋了大多數在開發時所需要的圖示。
其他一些小修改像是加強前後頁切換的的連貫性、新增頁面路徑、圖片放大、手機上主題頁面切換以及新增分享文章功能。
如果讀者有興趣的話，這次筆者也有建立一個模版 Repo，儘管還是有蠻多問題的，但會在持續優化。
週末愉快！
本期內容就更新到這裡，感謝大家的閱讀，如果有任何問題或想法歡迎一起討論，也歡迎分享給更多人知道！你的每一份支持，都是我持續創作的動力！更多關於我的創作可以點擊這裡。
Happy Coding!