每月 Web 開發更新 7⁄2018：實用的可訪問性、設計錯誤和功能控制

網絡繼續讓我驚訝。 由於平台的多樣性和不同的變化，很難看到一個直接的模式——即使有（只有）一個。 但是很高興看到正在發生的變化，向平台添加了哪些功能，哪些功能被棄用，以及瀏覽器如何實施越來越多的技術來保護用戶免受惡意網站攻擊。 有趣的是，如今這些安全功能與開發人員的功能一樣受到關注。 這表明了隱私和安全的重要性，以及過去網絡的不穩定和不安全。

但所有這一切最好的一點是，它表明堅持人們給我們的東西是多麼重要。 與其為所有事情實施我們自己的解決方案，不如重用現有系統通常要好得多。 使用自定義元素擴展本機 DOM 元素（而不是從頭開始編寫我們自己的自定義元素）不僅依賴起來更安全，而且工作量更少，而且更具包容性。 如果我們考慮是否應該構建我們自己的 SSL 版本或為此使用現有軟件，為什麼我們要構建一個基於任何內容的可點擊元素，而不是改變a或button元素的行為？ 如果瀏覽器已經為我們提供了 API，我們為什麼還要自己檢查資源主機驗證呢？ 本週的文章都致力於這些主題。

另一件讓我印象深刻的事情是 Andrea Giammarchi 的文章“A Bloatless Web”，他在其中描述了當我們編寫 JavaScript 以編寫現代 ECMAScript 時，我們如何盲目地使用 Babel 作為開發人員。 但是我們通常沒有意識到在現代瀏覽器中轉換我們所有的現代代碼並不是最有效的方法。 我很高興 Andrea 提供了一些關於我們如何改善這種情況並提高我們的網絡應用程序性能的想法。 通過不再為每個瀏覽器轉換代碼來提供三分之一的包大小，這不是很神奇嗎？

消息

• 站點隔離有效地使不受信任的網站更難訪問或竊取您在其他網站上的帳戶的信息。 Chrome 67 現在隨它一起發布，並且不再加載跨域讀取阻止 (CORB)，例如 JSON 文件作為圖像。 但更進一步，這些變化意味著整頁佈局不再保證是同步的。 如果您從 JavaScript 中的元素讀取計算的大小或使用unload事件偵聽器，此新功能會影響您。 確保您了解這一點並檢查您的網站是否仍按預期工作。
• 到目前為止，我們對內容安全策略有所了解——該功能允許開發人員通過主機名限制某些資源的負載。 但是瀏覽器供應商現在提出了一些新的東西：特性策略。 這允許 Web 開發人員有選擇地啟用、禁用或修改瀏覽器中某些 API 和 Web 功能的行為。 它類似於 CSP，但不是控制安全性，而是控制特性，Eric Bidelman 寫了一篇特性策略介紹，解釋了一切。
• Brave 瀏覽器團隊展示了他們保護用戶隱私的最新功能：通過 Tor 網絡連接的標籤。

通用的

• Anton Sten 詢問科技行業的價值觀是否被打破？ 分析蘋果、微軟、谷歌、亞馬遜以及其他小型公司的營銷策略，以及我們如何才能做真正有目的的工作並堅持我們的價值觀，而不是將它們視為我們不需要尊重或堅持的營銷材料。
• 現在世界的技術部門正在迅速將世界上的所有事物轉變為數字事物，許多人呼籲在我們的領域中提高道德規範。 在許多情況下，這是一個相當模糊的目標，所以讓我們將其應用於數字化的一部分：前端開發。 作為前端開發人員，我們如何才能更有道德，我們可以做哪些事情？ 希德·德弗里斯（Hidde de Vries）為此寫了一篇文章。

安全

• Ticketmaster 的客戶數據已被洩露，看起來，這是由於包含第三方腳本的定制單行代碼造成的。

用戶界面/用戶體驗

• Eugen Esanu 展示了我們仍然犯的十個小設計錯誤，以及我們可以做些什麼來使我們的設計更加用戶友好。

隱私

• 這是一份有趣的報告，關於 Google 如何允許外部應用程序開發人員在應用程序授權期間授予權限時閱讀人們的 Google 電子郵件。 問題在於，沒有辦法輕鬆阻止這種情況，如果您將 Gmail 用於您的公司，它可能會產生相當大的影響，因為它可能會影響隱私政策並且受 GDPR 的約束。

網絡性能

• Max Bock 介紹了我們如何使用網絡信息 API 構建對實際設備連接速度做出反應的組件。 儘管它目前僅在 Chrome 和三星互聯網瀏覽器中可用，但值得一試，並且可能已經為這些用戶提供服務。
• 有時，我們仍然可以閱讀文章，提到優化 CSS 選擇器以提高性能的重要性。 這起源於幾年前的研究，但 Ivan Curic 再次對此進行了研究，發現這並不重要。

可訪問性

• Microsoft 的開發人員團隊分享了一個關於實用可訪問性的視頻播放列表，包括如何優化演示文稿或語言以包含在內，或者如何在您的網站上構建適當的“跳過導航”功能。
• Sara Novak 分享了她如何通過嘗試色盲來理解其他人如何以不同方式體驗世界來表現出同理心。
• Firefox 的開發者工具現在有一個可訪問性檢查器模式。 以下是如何激活它以及如何使用它。

JavaScript

• Leon Revill 向我們展示瞭如何使用 Web 組件擴展現有的原生 DOM 元素。 這是非常有用和有用的，因為我們不僅可以通過為自定義元素使用預構建模板來節省大量時間，而且還可以免費獲得所有優化和默認值（語義、可訪問性、瀏覽器功能），並且仍然可以在上面構建我們自己的行為其中。 至少，如果我們可以使用自定義元素，那是另一回事了。
• Gerardo Rodriguez 展示了我們如何使用 Service Worker 和 Fetch API 優化網站的性能很容易失敗，以及這如何導致瀏覽器中的配額異常。 幸運的是，他找到了原因並通過設置正確的 CORS 標頭，Gerardo 最終解決了單緩存不透明響應的奧秘，並告訴我們如何避免這些問題。
• Filepond 是一個不錯的開源 JavaScript 文件上傳器。 Rik Schennink 分享了構建它所面臨的挑戰。
• Andrea Giammarchi 關於將 JavaScript 與 Babel 捆綁在一起的問題以及為什麼轉譯代碼不再是最佳解決方案。 相反，我們應該考慮如何根據瀏覽器支持來提供不同的捆綁包，以減少捆綁包的大小並提高性能。
• Justin Fuller 分享了 JavaScript 即將推出的三個很棒的新特性，它們將幫助我們編寫更易於理解的代碼，例如操作鏈、空值合併或管道運算符。
• Addy Osmani 和 Mathias Bynens 寫了一篇關於我們今天如何在 Web 上使用 JavaScript 模塊的入門介紹。

CSS

• 一個文章系列，涵蓋了我們如何在 Internet Explorer 中偽造具有間隙的自動放置網格。
• CSS Grid 很好，但是我經常聽到人們不能使用它，因為 IE11 不支持它。 但這並不完全正確，因為 IE11 有可用的 CSS Grid 的早期版本，我們可以使用 autoprefixer 輕鬆轉換。 Daniel Tonon 解釋了 CSS Grid 的差異以及我們可以使用和不能使用的功能，並將繼續提供更多提示。
• 對很多人來說，CSS Grid 還是很新的，它的功能非常強大，可以幫助我們在 CSS 中創建基於網格的佈局時解決很多問題。 但是在當前版本中，仍有幾件事是不可能的。 CSS Grid level 2 將為我們帶來子網格，Rachel Andrew 解釋了你需要它做什麼。
• CSS-in-JS 好嗎？ 只是不好嗎？ 當沒有明顯的贏家時，為什麼我們總是陷入爭論的陷阱，以及我們如何通過承認進化和在上下文中看待事物來做得更好。

工作生活

• 為什麼耐心的概念和努力建立持久的東西應該​​在商業中得到更多的關注。 閱讀另一篇文章時，我想到了一些想法，似乎很多人喜歡這背後的想法。
• Ethan Marcotte 講述了他如何選擇客戶，以及為什麼他認為只選擇您可以在道德上支持的客戶很重要。 但這也表明有時這可能是多麼困難，正如最近關於微軟與法人實體的商業合作的討論所表明的那樣。