每月 Web 開發更新 9⁄2018:原生延遲加載和虛構工作

已發表: 2022-03-10
快速總結↬網絡的發展速度如此之快,以至於很難保持領先地位。 為了讓您了解過去幾週 Web 開發世界中發生的事情,Anselm 再次匯總了他的每月更新。

將 JavaScript 與 CO2 進行比較是一個有趣的概念,但也是一個非常有效的概念。 為 Chrome 團隊工作並對 Web 的當前狀態有很多見解的 Alex Russel 表示,使用過多的 JavaScript 或僅使用它(沒有漸進增強/優雅降級)將與過多的 CO2 產生相同的效果地球上的生態系統——生態系統將分崩離析。 就像我們需要一定量的二氧化碳才能生存一樣,我們也需要網絡上的 JavaScript。 正是那條細微的界限造成了差異——不多與根本沒有之間的界限。

我覺得使用我們現在擁有的本機瀏覽器 API,我們有一個絕佳的機會來構建出色的 Web 服務,而不會使它們過於臃腫,並且不只依賴於 JavaScript。 我們可以通過 ES6 類輕鬆地使用自定義元素 API 增強本機元素,代碼如此之少,以至於在第三方框架中自行構建所有這些似乎很荒謬。 巧合的是,Github 工程團隊發表了一篇關於他們如何完全放棄 jQuery 以及他們現在改用什麼的文章:原生 JavaScript 和逐漸增強其平台的小型、精簡代碼。 更少的代碼,更好的可維護性和更高的穩定性。

消息

  • Chrome 70 現在處於測試階段,將形狀檢測作為原始試驗,允許我們在圖像中執行 QR 碼讀取、面部檢測和文本識別。 Web 身份驗證 API 也得到了一些更新,並且向<script>元素添加了referrerpolicy支持。 此版本還將棄用 Custom Elements v0、HTML Imports 和 Shadow DOM v0。
  • 最後,在 Firefox 62 中,Mozilla 提供::selection而不是:-moz-selection 。 他們還為 JavaScript 數組實現了flat()flatMap() ,開發人員獲得了一個新的 Shape Path Editor。
  • Chrome 69 已經發布,並為我們帶來了 CSS Scroll Snap Points、用於像 iPhone X 一樣的剪切顯示的 CSS viewport-fit屬性,以及允許在一個選項卡或 worker 中運行的腳本異步獲取鎖的 Web Locks API。它在執行工作時,然後釋放它。 此更新還附帶 CSS 圓錐漸變支持、 toggleAttribute() (類似於classList.toggle()方法,但用於屬性)以及用於數組的flat()flatMap() 。 不幸的是,這個版本改變了瀏覽器顯示 URL 的方式,似乎人們認為這是一個安全漏洞。 讓我們看看這將如何演變。
  • 隨著 Firefox 62 支持可變網絡字體,我們終於在所有主流瀏覽器中獲得支持,並且現在可以廣泛使用它來提高性能、在排版方面更有創意,並大幅減少數據流量。
  • Manuel Rego Casasnovas 在 Chrome 瀏覽器中以百分比和不確定高度寫了關於 CSS 網格佈局的最新變化。
  • 任何不是專家的人都很難解釋互聯網上的跟踪實際上是如何工作的。 這就是為什麼 Firefox 現在更改其默認設置並默認在其瀏覽器中強制執行跟踪阻止的原因。
  • PHP7.3 即將推出新的 Heredoc 和 Nowdoc 語法、函數調用中的尾隨逗號、 is_countable()array_key_first()array_key_last()和 Argon2 密碼哈希增強。
跳躍後更多! 繼續往下看↓

一般的

  • Alex Russell 的“‘開發者體驗’誘餌和切換”是一篇很棒的文章,它解釋了我們目前為 Web 構建的有毒環境以及為什麼 JavaScript 可以與二氧化碳相提並論——兩者都需要小部分,但如果有太多其中,它將使整個生態系統(網絡)處於危險之中。 一篇深思熟慮的文章,我在這裡推薦大家閱讀、分享和記住。
  • 隨著 Alexa、Cortana、Siri 甚至客戶支持聊天機器人成為常態,我們不僅要開始考慮內容的外觀,還要考慮它的聲音。 我們可以——也應該——使用 HTML 和 ARIA 來使我們的內容結構化、合理,最重要的是有意義。

網絡性能

  • 即將推出的 PostgreSQL 11 有一些有趣的性能改進。 Dimitri Fontaine 分享了他們可以做出的改變。
  • Ben Schwarz 分享了可能很快成為現實的 Web 本地延遲加載的新方法。

安全

  • Nightwatch Cyber​​security 在 Android 中發布了一個安全漏洞,該漏洞會將有關用戶設備的信息暴露給在其上運行的所有應用程序。 這似乎包括 WiFi 網絡名稱、BSSID、本地 IP 地址、DNS 服務器信息和 MAC 地址——所有這些都是允許人們跟踪單個 Android 設備的大量私人信息。 不幸的是,包括 fork 在內的所有 Android 操作系統版本(除了提供修復的 Android P/9 之外)似乎都受到了影響,並且沒有修復舊版本的計劃。

CSS

  • Chen Hui Jing 解釋瞭如何在不影響可訪問性的情況下自定義單選按鈕。
  • CSS Shapes 已經有相當長的歷史了。 在 Adob​​e Web 團隊的一項倡議下,瀏覽器供應商很早就將其引入 Web,很快又刪除了這些實現,現在正慢慢地以迭代、改進的規範和實現回歸。 Rachel Andrew 分享瞭如何實現 CSS Shapes。
  • Sara Soueidan 寫下了她從將 CSS 顏色定義為 HEX 或 RGB 轉換為 HSL 的原因以及好處是什麼。
  • 隨著網絡的發展,出現了新功能,以更好地適應其新的形式因素和用例。 我很興奮的一個特性是color-adjust屬性,它是在 CSS 顏色模塊級別 4 中提出的。它承認網絡將繼續出現在顯示效果不佳的設備上。
色彩和諧
使用 HSL 創造色彩和諧變得輕而易舉。 (圖片來源)

HTML 和 SVG

  • Stefan Judis 閱讀了 Mozilla 文檔中有關input元素的內容,並發現了一些有趣的東西,它們可能對您的下一個項目非常有用。

JavaScript

  • Nolan Lawson 比較了在 JavaScript 中使用計時器的不同方式以及何時使用哪種方式。
  • ky 是一個基於瀏覽器 Fetch API 的小巧優雅的 HTTP 客戶端。
  • Ankur Anand 寫了一篇關於 CORS 請求在單頁應用程序中的可怕性能成本的文章。
  • Adrian Roselli 分享了我們如何在頁面末尾為打印樣式構建鏈接列表。
  • 通天塔 7 出來了。 它更快,有更多選項,並且支持 JSX Fragments 和 TypeScript。
  • 自動調整<textarea>的大小對於為您的網站或服務編寫內容的人來說是改善用戶體驗的一種非常有用的方法。 我寫了一篇關於如何使用簡短的 ECMAScript 6 類自動調整表單元素大小的博客文章。

可訪問性

  • Ethan Marcotte 反思了可訪問性意味著什麼,並意識到這不是讓網站與某些輔助技術或軟件兼容,而是讓每個想要訪問它的人都可以使用它,而不管技術如何。 這是一個巨大的差異,因為他的方法包括閱讀網站有困難的人,即使他們使用與您相同的瀏覽器和相同的筆記本電腦。 也許他們在明亮的陽光下,難以閱讀小文本,或者被鮮豔的色彩或動畫元素分心。
  • Eric Bailey 強調了手動測試可訪問性的重要性。
  • Scott O'Hara 使用aria-label共享麵包屑導航以提供可訪問的名稱,並使用aria-current來指示當前活動的鏈接。

工作生活

  • Ryan Singer 思考了用“想像的工作”來規劃項目的難度,以及為什麼在規劃路線圖之前先測試集成的難度如此重要。
實際工作與虛構工作
我們以前都經歷過:在腦海中想像一個解決方案並實施它是兩件完全不同的事情。 (圖片來源)

超越……

  • 我喜歡塗鴉的概念,即使我不經常這樣做,它總是讓我著迷。 Doodle Addicts 是一個收集世界各地人們塗鴉的平台。 一個不錯的畫廊,可以從中獲得靈感。
  • Jonny Brooks-Bartlett 寫了一篇有趣的文章,說明為什麼這麼多數據科學家要離職。 如今,這份工作聽起來可能很有趣,而且像是一個不錯的選擇,但通常期望與現實不符,政治和道德決策非常困難。
  • Marco Lambertini 解釋了技術如何幫助我們拯救地球,但最重要的是我們需要學會珍惜自然及其資源。
  • 本週,一位非常知名的開源貢獻者提出了一個有趣的討論,他試圖更改他們其中一個項目的許可證,以防止支持美國 ICE 機構的公司使用他們的軟件。 在發現該更改不具有法律效力後,該更改很快被恢復。 然而,整個話題(最近出現得更頻繁)表明,越來越多的人考慮他們工作的影響。 他們不希望它被用來做壞事,而是用來做好事。 雖然開放、不受限制的來源的想法是可取的,但前提是人們使用它來支持人權和改善生活。 我很好奇可以確保這一點的新解決方案; 也許我們很快會看到更多開源項目的服務條款(這將具有法律約束力,但可能會阻止免費的開源項目使用它們)。