iOS Safari Canvas 觸控事件踩坑紀錄｜React Pointer Events 與 preventDefault 實戰

在 React + Canvas 的圖片標注工具加入觸控支援時，Chrome DevTools 手機模擬全部正常，放到真正的 iPhone 上卻完全不動。這篇記錄在 iOS Safari 處理 Canvas 觸控事件踩過的坑，包含 touch-action: none 不可靠、React 合成事件 passive 限制、click 不觸發的 cursor: pointer 陷阱、crypto.randomUUID 相容性問題，以及最終用原生 Pointer Events 搭配條件式 preventDefault 的解法。

Regex 正規表達式教學｜語法速查、中文比對與實用範例

Regex 正規表達式用來描述文字模式，可處理格式檢查、資料擷取與批次取代。本文從字元類別、量詞、錨點與群組開始，整理到環視、Unicode 與效能陷阱，搭配 Email、台灣手機號碼、Log 與開發工具範例。前段提供常用語法速查，中文比對章節則區分漢字範圍、Unicode 屬性與繁簡辨識限制。使用 JavaScript、Python、Java、grep 或 sed 時，也能依引擎差異選擇適用語法，避免將某個工具的範例直接套用到所有環境。

用JavaScript取得作業系統與瀏覽器的名稱、版本、螢幕尺寸、頁面尺寸、縮放比例

在瀏覽器內透過JavaScript可以讀取螢幕尺寸、瀏覽器視窗尺寸、瀏覽器可視區尺寸、整個網頁的尺寸、縮放比例等。但是使用的時候要從各個不同的Object讀取，因此我寫成一個JavaScript的function，將各個資訊包裝成一個Object可以直接讀取使用。還會介紹一個好用的套件可以解析瀏覽器和作業系統的名稱與版本。

在Netlify部署React的Browser Router，不要出現#井字Hash的方式，其他單頁式網頁也適用

Netlify是一個部署前端網頁的好選擇，光是免費方案就有100GB可以使用，一個帳號可以部署多個網站，在全球多處都有伺服器可以加速。但使用React Router DOM的Browser Router產生的虛擬路徑不是真的存在於Netlify上，讓Netlify無法處理。本文教學讓Browser Router順利運作的設定方式。

前端網頁開發須知，NPM、Parcel、React、Router、Redux、Axios、Bootstrap與其他工具簡介

前端網頁開發通常包含HTML、CSS、JavaScript，可是單靠三者從頭打造一個現代網頁容易重複發明輪子，自己發明的輪子還可能跟別人車子不合用，因此有許多套件可以減輕開發工作，最後還需要一個打包工具將套件與網頁打包起來，成為可以放上伺服器的產品，本文以React為例依序介紹一些常用的工具，希望在實際開始學習之前先通過本篇簡介進行初步的理解，那麼實際開始學習時就能更加快速進入狀況。