網站開發與維護
曾參與 4 個以上新聞媒體產業的網站開發、維護與搬遷，使用 Next.js / Nuxt.js 建立 SSR 網站，採用 RESTful API 與 GraphQL 串接資料，並處理第三方script載入、廣告系統、會員系統、頁面元件懶載入(lazy-loading）、串接金流、響應式設計等各式問題。
- 維護以 Nuxt.js 為基底的網站，並參與搬遷計畫，將其以 Next.js 改寫，將 RESTful API 替換為 GraphQL。
- 解決既有網站潛在錯誤，完成紙本雜誌訂閱和第三方金流串接並搬遷、使用 programmable search 實作搜尋頁面。為了優化 SEO，搬遷 AMP 頁面並處理 google 報錯。
- React
- Next.js
- GraphQL
- Restful API
- JSDoc
- 維護以 Nuxt.js 為基底的網站，除了實作首頁改版，期間經歷 GA 版本的新舊交接期，統一改交由 GTM 監控，更方便使用者更改。
- 參與「進行中」的搬遷計畫，將其以 Next.js 的 APP Router 改寫，並引入 TypeScript。
- Vue
- React
- Next.js
- GraphQL
- Google Tag Manager
- App Router
- TypeScript
- 參與大部分網站初期開發與後續維護，包含響應式設計、捐款流程串接第三方金流、內嵌 Google CSE 實現站內搜尋。
- 與跨部門設計師合作，參與網站初大部分頁面開發與後續維護。
- 與後端同事協作，串接 Firebase 實作會員系統。
互動式專題
與記者及設計師共同合作，推出具有互動性的專題報導，以更具互動性的方式呈現長篇、難以理解的議題或具時效性的資料給讀者。參與製作 4 篇的專題，在專題製作完畢後，也會紀錄心得及過程，並與團隊同仁分享開發與使用新技術的心得。
「我的人生停在發病那天」：從千份資料還原精神障礙者困境
- 因應《精神衛生法》修正三讀通過，將改變精神疾病患者長久以來欠缺資源協助的困境，但社會對精神疾病污名化始終存在，該互動式專題專題透過近千份司法院判決書的精神鑑定內容，還原這群人的樣貌。
- 負責隨機滑動顯示段落功能（可參考 @readr-media/react-random-text-selector），以及文內索引，該功能得到記者好評，現在在 readr 專題報導內被廣泛使用。
- 與藝術家合作，用 VR 虛擬實境還原了三位香港流亡者在台生活的房間。2019 年反送中運動後，他們來到台灣。邀請你走近他們來台後的生活，拾起他們散落在台灣房間裡的記憶碎片，找尋療癒與重建生活的可能。
- 但作為互動式專題轉捩點，部門內部開始思考將完成品包成 package 丟上 npm，頁面抓取 GraphQL 資料後搭配 package render。除了符合部門開源的信念、更方便記者修改資料，也大幅增加了互動式專題的重用度，減少專題開發成本。
- 負責根據不同裝置播放不同的影片組合，以及調控音量的 component。完成後打包上傳 npm，可參考 @readr-media/react-karaoke。
- 互動式專題，由後端和記者共同將第七至第十屆立法院法案的一生製作成視覺化查詢器。並搭配捲動式影片和三個個案，試圖還原 8 千多筆法案在立法院的歷程，以及各黨如何推進這些法案。
- 我處理查詢器以外的事物，包含負責支援將滾動式效能優化、一開始的滾動視差動畫效果，以及 header 上的索引。（雖然不是我做的，但我大推查詢器，超讚！）
- 該報導入選「全球華文永續報導獎」。
- 與部門記者共同創建的疫苗施打查詢平台，收集各縣市的疫苗施打規則，經過逐層篩選之後提供給使用者直接方便的疫苗施打指南，並嵌入相關互動圖表作為輔助說明，不足當時尚未完善的政府查詢網站。
- 後來因為消息逐漸流通，便下架該網頁。
- 綜合性報導，關注經過口蹄疫村摧殘的台灣畜牧業，是否能在 24 年後解禁前夕抵禦非洲豬瘟的來勢洶洶。
- 使用並優化滾動式影片讓讀者更能理解前因後果，以及目前近況以及專題報導。使用索引標籤創造更舒適的閱讀體驗。
- Vue
- Nuxt2
- 使用捲動式影片
- Restful API
- 製作互動網頁，該專題結合多方專業聲音，搭配與之前發法案比較，配合幾個不同視角的個案，讓民眾更了解《跟蹤騷擾防治法》的前世今生。
- 和記者與設計師合作發想，並獨立完成工程作業。實作視差滾動效果，讓滑鼠往下滑時畫面左右移動，以及搭配頂端有索引功能的跟騷小動畫，增加互動性。