Web Develop

最近在用Cloudflare的Page功能直接host靜態網頁，實在太方便了。但有時候又會需要提供給訪客提交聯絡表單，Y Cheung研究了下，發現 Cloudflare 官方文檔中提供的方案還行。

WCAG 2.1 Guidelines for your reference.

最近Y cheung 遇到了兩個典型 CORS error問題，XMLHttpRequest 和 Fetch 請求了跨來源資源被瀏覽器阻擋，記錄一下解決方法。 什麼是Cross-Origin Resource Sharing (CORS) 跨來源資源共用？ # Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources. CORS also relies on a mechanism by which browsers make a “preflight” request to the server hosting the cross-origin resource, in order to check that the server will permit the actual request. In that preflight, the browser sends headers that indicate the HTTP method and headers that will be used in the actual request.

結構化資料是一種標準化格式，它提供網頁相關資訊並將網頁內容分類，有助於優化搜索引擎SEO。 ⚠ 即使網頁已正確加上標記，Google 也不能保證結構化資料一定會出現在搜尋結果中。

Web Accessibility 就是我們通常所說的無障礙網站，這裡的「障礙」包括了聽覺障礙、認知能力障礙、神經損傷、身體障礙、語言障礙和視覺障礙，這也是基本人權的一個方面。

Chrome上了新的實驗性功能 CSS Overview，感覺對做網站前端十分有用，可以快速查閱網站上所使用的顏色、字體、未使用的css申明、定義的媒體查詢。

一般情況下，按 F12 可以讓Chrome瀏覽器進入全屏模式。 如需啟動Chrome時就以全屏模式打開某指定網頁，可以使用kiosk參數。具體操作如下： 在Chrome中創建某地址的快捷方式，比如我創建一個Google的。

這一版寶可夢的設計走極簡風啊，感覺缺乏童真了，嚶嚶嚶。 Y.Cheung用CSS實現了寶可夢劍盾遊戲中對話框的樣式，如下： See the Pen CSS3 - Pokemon Sword and Shield dialogs style by Yuki (@yukich) on CodePen.

瀏覽器自動填充功能已經流行很久了，用戶因此可以快速填充註冊表單節省時間。 Autocomplete標籤包含了一些基本的值，包括tel，email，number，name等。