frontend

如何在 macOS 上為 iOS 裝置裡的瀏覽器網頁除錯(Debugging websites in Chrome on iOS)

隨著各種手持智慧型裝置的盛行，一個網頁可能會在不同尺寸上的螢幕呈現，因此網頁設計勢必要考慮響應式設計(responsive design)，如不考慮響應式設計不僅容易造成使用者困擾之外，也可能會影響 SEO 分數，例如 Google 對有考量 mobile-first 設計的網站有加分。

雖然可以在瀏覽器的開發者工具調整螢幕尺寸，藉此查看網頁在不同裝置、螢幕尺寸的表現，不過最好還是實際在手持裝置內測試過會比較安心，因為我們無法保證手持裝置內的瀏覽器實作方式會跟其他平台一樣，這些差異就可能造成網頁的呈現不符預期。

但是要為手持裝置裡的瀏覽器網頁除錯，需要做一些設定才行，本文記錄如何在 macOS (例如 MacBook )上為 iOS 裝置(例如 iPhone ) 裡的瀏覽器網頁除錯(debugging)的設定過程。

Posted on  Nov 19, 2023  by  Amo Chen  ‐ 3 min read

用 <dialog> 輕鬆實作 Modal 對話框

沒查不知道現在做 Modal 這麼簡單⋯⋯。 原來所有的瀏覽器都早已支援 <dialog> 標籤，可以不用像古早時代實作 modal 要寫一大堆 CSS, Javascript 就為了讓對話框隱藏、彈出來甚至消失，

Posted on  May 9, 2023  by  Amo Chen  ‐ 1 min read

前端工程師必修課 - Interneting is Hard

如果你對前端工程師有興趣，但是有沒有任何相關資訊背景，那麼 Interneting is Hard 可能是一個不錯的新手村。 Interneting is Hard 不僅提供各種精美圖表解說之外，也很詳細的教你 HTML

Posted on  Apr 5, 2023  by  Amo Chen  ‐ 1 min read