Javascript，XML 轉 JSON
本篇大綱：本篇要解決的問題。下載 JS 程式碼。取 XML 資料並轉成 JSON。轉出 JSON 的資料放進 OSM。本篇除了一個套件，也會實作取一個政府公開的 XML 資料，並放進開源的地圖 OSM 裡，再加上 marker，製作一個捷運站點地圖。
OSM + Leaflet 學習筆記 2：移動中心點、抓目前地點
本篇大綱：本篇要解決的問題。移動中心點-panTo、flyTo、panBy。抓取使用者位置並讓 Marker 跟隨移動-抓取使用者位置。本篇 Demo 及原始碼。
OSM + Leaflet 學習筆記 1：建地圖、marker、事件、換圖層
本篇大綱：本篇要解決的問題。請求地點，建立地圖。放置 Marker。Map 點擊事件。zoom in, zoom out。改變地圖樣式 Layer。本篇 Demo 及原始碼。Google Maps 好用，但過了一定的額度會收費，當時就有人留言問說免費地圖的事，有留上了心。
製作一個 Hugo + Tailwind CSS 初始檔
本篇大綱：本篇要解決的問題。初始檔：安裝、開發、產靜態檔。config、Sitemap、Google Analytics、客製參數。head 檔、Open Graph、引用 CSS、JS 檔。Schema 結構化資料。content 檔案架構、圖檔抓文章連結、裁切。未完待續。
表單驗證：中文姓名、身分證、手機條碼、生日、信箱、手機、選擇縣市
本篇大綱：本篇要解決的問題。中文姓名。身分證字號、手機條碼。生日 / 出生年月日。E-mail 電子信箱。手機。選擇縣市。範例及原始碼。
用原生 JavaScript 做一個簡單的抽獎功能頁面
本篇大綱：本篇會完成的Demo、本篇用到資源、html部份、css部份、js部份、抽獎名單資料庫、範例頁面、原始碼。很多活動頁上都在玩抽獎，就自己動手寫了一個出來。把抽獎的名單換成店家名稱，順便再加上Google Map進去，就解決不知道午餐要吃什麼的煩惱啦~
Hugo 學習筆記
本篇大綱：本篇要解決的問題。Command-Line。archetypes。layouts。Base Template。列表頁、單文頁 VS. Section Template。Partials。Shortcode。content。data。文章分類。Variables。Functions。if else。
YAML 基本使用筆記
本篇大綱：本篇要解決的問題。YAML 重點觀念。註解。Key-Value Pairs。Objects。Array Lists。Multi Line Strings、Environment Variables、Placeholder。
Plyr 播放器使用筆記：控制項、取值、事件、改樣式、外部平台影片
本篇大綱：本篇要解決的問題。建立影片播放器及控制項、開啟所有控制項、新增字幕檔、新增多種畫質選擇、提示 Tooltip、中文化介面、時間軸加上段落標記。取值：影片總時長、當下秒數。監聽事件：播放、暫停。修改樣式。外部平台影片：Youtube、Vimeo。
Video.js 使用筆記：中文介面、取值、事件、改樣式
本篇大綱：本篇要解決的問題。建立影片播放器、引用 CSS、JS、HTML。使用中文介面。取值：影片總長度、當下秒數。監聽事件：播放、暫停。改變播放器樣式。範例原始碼。
