每月 Web 開發更新 6⁄2018：複雜性、基於 HTTPS 的 DNS 和推送通知

如今，我們在 Web 項目的每個角落都看到了複雜性。 我們已經閱讀了很多關於特定技術變得多麼複雜的文章，並且我們一遍又一遍地討論這個問題。 過去我們通過 FTP 上傳網站並且沒有 git 或任何類似的東西，現在生活在我們擁有構建系統、轉譯器、框架、測試和 CI 的時代，即使是最小的項目，這很容易理解. 但另一方面，Web 開發在過去 15 年中發展得如此之快，以至於我們今天無法與過去相比。 雖然過去有些事情似乎更容易，但我們忽略了我們今天擁有的優勢和無數可能性。 那時我們沒有編寫測試，好吧，我們根本沒有測試——這意味著沒有可靠的方法來測試成功。 當我們沒有部署過程時，上傳新版本很容易，但破壞某些東西也很容易——而且這種情況比現在有持續集成系統的情況要多得多。

Jeffrey Zeldman 就此事寫了一篇有趣的文章：“The Cult of Complex”概述了我們如何在不必要的細節中迷失自我，並經常試圖過度思考問題。 我喜歡構建不太複雜但表現出相當大責任的系統的挑戰（涉及道德、隱私、安全、出色的用戶體驗和性能）並且工作可靠（測試、部署、可用性和再次表現）。 我想找到正確平衡的問題不會很快消失。 複雜性無處不在——我們只需要確定它是有用的複雜性，還是僅僅因為它更容易或者因為我們過度設計了原始問題而添加了它。

消息

• 即將推出的 Safari 版本 12 在 Apple 的 WWDC 上亮相。 這是新功能：選項卡中的圖標、強密碼以及通過 HTML 屬性進行的密碼生成器控件，包括雙因素身份驗證控件、3D 和 AR 模型查看器、iPad 上的全屏 API、 font-display ，以及非常重要的， Intelligent Tracking Prevention 2.0 比以往任何時候都更具限制性，並且可能對現有網站的功能產生重大影響。
• 無頭 Chrome 自動化庫 Puppeteer 現已發布 1.5 版。 它帶來了瀏覽器上下文來隔離通常在頁面之間共享的 cookie 和其他數據，並且 Workers 現在也可以用於與 Web Workers 交互。
• Google 發布了 Lighthouse 3.0，這是其性能分析工具的第三個主要版本，它具有新的報告界面、一些評分更改、CSV 導出和 First Contentful Paint 測量。
• Chrome 67 就在這裡，將漸進式 Web 應用程序帶到桌面，並支持通用傳感器 API，並擴展憑據管理 API 以通過 USB 支持 U2F 身份驗證器。
• 在過去的幾個月裡，我們已經看到瀏覽器的安全界面發生了相當大的變化。 首先，他們強調提供安全連接 (HTTPS) 的網站。 然後他們決定指出不安全的網站，現在 Chrome 宣布了秋季的新變化，將通過將 HTTP 頁面標記為“不安全”來使 HTTPS 成為默認設置。

一般的

• 在“複雜的崇拜”中，Jeffrey Zeldman 寫道，我們似乎常常忘記簡單是我們所做的一切的關鍵和目標，也是項目和生活的總體目標。 他解釋了為什麼它如此難以實現，以及為什麼它如此容易——而且很誘人——培養複雜的系統。 一本非常好的讀物，絕對是我會添加到我的“常青樹”列表中的一篇。
• Heydon Pickering 分享了一篇新的、非常有趣的文章，它教我們如何正確構建 Web 組件：這次他解釋瞭如何構建一個包容性和響應性的“卡片”模塊。

用戶界面/用戶體驗

• Cool Backgrounds 是 Moe Amaya 的一個很酷的副項目。 它是具有漸變的多邊形背景的在線生成器，可以生成許多變體和形狀。 簡單的美麗。

工裝

• Ben Frain 分享了一些在幾乎所有現代代碼編輯器中都可用的有用的文本編輯技術。

安全

• 隨著通過 DNS 進行的安全攻擊越來越流行，基於 HTTPS 的 DNS 變得越來越重要。 林克拉克用漫畫解釋了這項技術，使其更容易理解。
• Windows Edge 現在正在預覽對same-site cookie 的支持。 進一步鎖定 cookie 的屬性已經在 Firefox 和 Chrome 中可用，因此 Safari 是唯一仍需要實現它的主要瀏覽器，但我想它也會很快在他們的技術預覽版本中登陸。

隱私

• 美國公民自由聯盟發現，亞馬遜現在正式與執法部門合作，並提供了一種已經在世界各地城市使用的大規模人臉識別技術。

網絡性能

• KeyCDN 邀請了 15 位對 Web 性能非常了解的人與讀者分享他們的最佳建議。 現在他們分享了這篇文章，其中包含許多對 2018 年有用的性能提示，包括我自己的幾句話。
• Stefan Judis 發現我們已經可以通過添加 HTML 標頭標籤link rel="modulepreload"在 Chrome 66 中預加載 ECMA 腳本模塊。

可訪問性

• 構建加載微調器（例如，在加載期間用於單頁應用程序）相對容易，但我們很少考慮讓它們可訪問。 Stuart Nelson 現在解釋瞭如何做到這一點。
• Paul Stanton 分享了我們應該使用哪些可訪問性工具來獲得最佳結果。

JavaScript

• JavaScript 最近被喜歡 Elm、Rust、TypeScript、Babel 或 Dart 的人欺負。 但是 JavaScript 絕對不會更糟，正如 Andrea Giammarchi 用很好的例子解釋的那樣。 對於使用其中一種其他語言的每個人來說，這篇文章也是一本很好的讀物，因為它顯示了我們應該注意的幾個陷阱。
• 對於很多項目，我們希望使用分析或其他腳本來收集個人信息。 隨著 GDPR 的生效，這變得更加困難。 Yett 是一個不錯的 JavaScript 工具，它可以讓您阻止此類資源的執行，直到用戶同意為止。
• Ryan Miller 創建了一個名為“The Frontendian”的新出版物，其中包含了迄今為止我遇到的關於 CORS 的最佳解釋和指南之一。
• Microsoft 的人員創建了一個很好的交互式演示頁面來展示 Web 推送通知可以和應該是什麼樣子。 如果您還沒有掌握這項技術，那麼它是了解其工作原理以及如何構建不打擾用戶的界面的絕佳入門讀物。
• Filepond 是一個用於上傳文件的 JavaScript 庫。 它看起來很棒，並帶有許多適用於 React、Vue、Angular 和 jQuery 的適配器。
• React 16.4 已經發布，並為庫帶來了相當多的特性：指針事件。 它們將使處理用戶交互變得更容易，並且已經被請求了很長時間。

CSS

• Oliver Schondorfer 分享瞭如何在 Web 上使用可變字體以及我們如何使用 CSS 設置它們的樣式。 您需要考慮的事項以及可能的陷阱的非常完整的摘要。
• 隨著即將推出的 macOS Mojave 支持“深色模式”，如果沒有明確設置background-color顏色，Safari 將開始自動將網站的背景顏色設置為黑色。 這是一個很好的提醒，瀏覽器可以設置和更改它們的默認樣式，我們需要仔細設置我們的站點默認值。 我仍然希望“暗模式”將暴露給 CSS 媒體查詢，以便我們可以正式添加對它的支持。
• Rafaela Ferro 分享瞭如何使用 CSS Grid 創建一個看起來不僅好看而且實際上很棒的照片庫。 這篇文章回答了我在談論網格佈局時經常遇到的許多問題。
• Marcin Wichary 解釋了我們如何使用現代 CSS 自定義屬性在短時間內創建一個深色主題。

工作生活

• Anton Sten 寫了關於我們應用程序的道德含義的文章。 當我們處理人工智能、影響人們生活的社交網絡以及 GDPR 強制執行的隱私問題時，為什麼“快速行動並打破常規”的時代已經結束，這是一個有意義的解釋。
• Basecamp 現在有一種新的圖表類型來顯示項目的狀態：所謂的“山圖”添加了比簡單的進度條更好的上下文。
• Ben Werdmuller 分享了他對簡歷的看法，以及簡歷總是無法反映你是誰、你做了什麼以及為什麼要被錄用。

我希望你喜歡這個每月更新。 下一期定於7月13日，敬請期待。 同時，如果您喜歡我的工作，請考慮在財務上幫助我資助 Web 開發閱讀列表。

祝你有美好的一天！

— 安塞爾姆