JSer.info #483 - jQuery 3.5.0がリリースされました。

jQuery 3.5.0 Released! | Official jQuery Blog

jQuery 3.5.0では、jQuery 4.0で削除される予定の非標準な:evenと:oddセレクタの代わりに、.even()と.odd()メソッドが追加されています。

また3.5.0はマイナーアップデートですが、非互換な変更を含むセキュリティアップデートが含まれています。
jQuery.htmlPrefilterでは正規表現を使って、$("<div />")のようなXHTMLのself-closeなタグを$("<div></div>")へと展開する処理が行われていました。
この正規表現での展開を使ったXSSが見つかったため、jQuery 3.5.0ではこの正規表現による展開を削除しています。

単一の<div />のようなケースは特に違いはありません。

$('<div/>').append(document.body);
// <div></div> が追加される

次のように複数のself-closedなタグを書いた場合に3.4と3.5では挙動が異なります。

$( "<div/><span/>" ).append(document.body);

jQuery 3.4まではjQuery.htmlPrefilterによって次のように展開されていました。

<div></div>
<span></span>

jQuery 3.5ではこの展開がなくなったため、次のような結果になります。

<div>
    <span></span>
</div>

このセキュリティアップデートによってjQueryを使ったライブラリにも一部影響が出ているようです。

3.5 incompatible with FullCalendar 3 · Issue #4664 · jquery/jquery

jQuery Migrateを使ったワークアラウンドや詳細については次のマイグレーションガイドにまとめられています。

jQuery Core 3.5 Upgrade Guide | jQuery

Firefox 75.0がリリースされました。

開発者ツールのコンソールにInstant evaluation previewsの追加、Async Stack Traceの対応などが行われています。
JavaScriptではPublic static fieldsやIntl.Localeのサポートが追加されています。
その他には、<img loading=lazy>での画像の遅延ロードのサポート、CSSのmin()/max()/clamp()のサポート、Web Animations APIの改善なども行われています。

リリースが延期していたChrome 81がリリースされました。

New in Chrome 81 | Web | Google Developers

リリーススケジュールがずれたため、次のChrome 82はスキップされ83が3週間早くリリースされる予定です。
今後のリリーススケジュールについては次のページで確認できます。

[PR] JavaScript Primerが発売予定

ここ数年書いていたJavaScript PrimerというJavaScriptの入門書が2020年4月27日に発売予定です。

JavaScript Primer 迷わないための入門書 | azu, Suguru Inatomi

物理書籍版はAmazon等で予約できるので欲しい人は予約してください。電子書籍版(Kindle/epub/PDF)も後日発売されます。

書籍の内容はOSSとして公開しているウェブ版の https://jsprimer.net/ と同じですが、
レイアウトなどは書籍として読みやすくするために最適化されています。

詳細は次の記事を参照してください。

JavaScript Primerの書籍版が4月27日に発売予定です！ | Web Scratch

ヘッドライン

Release 10.4.0 · preactjs/preact

github.com/preactjs/preact/releases/tag/10.4.0

React JavaScript library ReleaseNote

Preact 10.4.0リリース。
vnodeの厳密な比較によるパフォーマンス改善、SSR時にhydrationがうまく行かなかった際のfallbackを追加など

jQuery 3.5.0 Released! | Official jQuery Blog

blog.jquery.com/2020/04/10/jquery-3-5-0-released/

jQuery ReleaseNote

jQuery 3.5.0リリース。
jQuery.htmlPrefilterの正規表現のタグ展開によってXSSが発生する問題の修正。これによって$("<div><div/></div>") のようなself-closedなタグと他のタグの組わせの挙動が変更される破壊的な変更も含まれる。
4.0で削除される予定の:evenと:oddの代わりに.even()と.odd()を追加など

3.5 incompatible with FullCalendar 3 · Issue #4664 · jquery/jquery

Firefox 75: Ambitions for April - Mozilla Hacks - the Web developer blog

hacks.mozilla.org/2020/04/firefox-75-ambitions-for-april/

Firefox ReleaseNote

Firefox 75リリース。
開発者ツールのコンソールにInstant evaluation previewsの追加、Async Stack Traceの対応。
<img loading=lazy>での画像の遅延ロードのサポート、CSSのmin()/max()/clamp()のサポート、Web Animations APIの改善など。

New in Chrome 81 | Web | Google Developers

developers.google.com/web/updates/2020/04/nic81

Chrome ReleaseNote

延期していたChrome 81リリース。
次のChrome 82はスキップされ83が3週間早くリリースされる。
Badging APIのサポート、Intl.DisplayNamesの実装、Origin TrialとしてWeb NFC APIの追加など

Release Notes for Safari Technology Preview 104 | WebKit

webkit.org/blog/10264/release-notes-for-safari-technology-preview-104/

webkit safari ReleaseNote

Safari Technology Preview 104リリース。
(macOSの開発版で)HTTP3をフラグ付きでサポート、CSSの:is()のサポート、WebRTC HEVC(H.265)のサポートなど

H265 / HEVC, hardware accelerated, in #Webrtc – DONE … well, almost. | WebRTC by Dr Alex

アーティクル

Web Animations in Safari 13.1 | WebKit

webkit.org/blog/10266/web-animations-in-safari-13-1/

CSS safari article

Safari 13.1でサポートされたWeb Animations APIについて

WebSocketStream: integrating streams with the WebSocket API

web.dev/websocketstream/

WebSocket strem article

PromiseベースであるWebSocketStream APIについての記事。
ReadableStreamやWritableStreamなどの基本的な使い方、Backpressureについて、Streamの閉じ方についてなど

Digging into the Privacy Sandbox

web.dev/digging-into-the-privacy-sandbox/

privacy Chrome article

プライバシー保護に関するAPIセットであるPrivacy Sandboxについての紹介記事。
現在のPrivacy Sandboxに関係するProposalの概要やゴール、関連する用語の解説など

Under-the-hood of web bundlers (e.g. Webpack) - ITNEXT

itnext.io/under-the-hood-of-web-bundlers-e-g-webpack-926e868f7f5e

JavaScript bundler article video

JavaScriptのBundlerについての発表動画の記事版。
bundlerの行っていることの解説、小さなコンパイラを作りながらbundlerの動作の解説、実際にbundlerを使ってウェブアプリを出力するところまでを解説している。

スライド、動画関係

電子情報学特論：Chromiumのアーキテクチャを解き明かす - Google スライド

docs.google.com/presentation/d/1AzBcuN-dmctk7v1IMZHivfpFAiXwCnsjyJS3wQ4sgE4/preview#slide=id.g82989a6582_1_134

Chrome slide architecture security

Chromiumのプロセスアーキテクチャについてのスライド。
マルチプロセスアーキテクチャ、埋め込みコンテンツでのSpectreのメモリ読み取り、iframeでのSite Isolation、ChromeのGCの実装についてなど。
またレンダリング処理がParsing、Style、Layering、Rasterのステージに分けていて中間データをそれぞれ扱うことで動的な変更に対応している話など