Fork me on GitHub

2022-01-11のJS: グローバルなサイトにおけるCore Web Vitals、2021 JavaScript Rising Stars、colors.jsのインシデント対応

Edit on GitHub 編集履歴を見る

JSer.info #574 - Improving Core Web Vitals, A Smashing Magazine Case Studyという記事では、Smashing MagazineのCore Web Vitals(LCP/FID/CLS)のスコアをどのように改善していったかについて書かれています。

Core Web VitalsはGoogle検索の指標に使われています。
また、Google Search Consoleでは、グローバルなChromeユーザーからのCore Web Vitalsのスコアを確認でき、この値はChrome User Experience Report のデータを元にしています。

サイトのLCPの改善をしたところ、なぜかGoogle Search Consoleの結果は改善されなかったという問題を掘り下げていったという内容になっています。
Smashing Magazineはグローバルなサイトであり、Google Search Consoleのスコアはグローバルなデータをまとめたものとなるため、ユーザーが多い特定の国でスコアが悪いと、全体のスコアにも影響がある点について書かれています。


2021年のGitHub Star数でのランキングをまとめたJavaScript Rising Starsが公開されています。

GitHub Starは実際の人気の利用数とは必ずしも一致はしませんが、
それぞれのカテゴリごとに解説も書かれているので読んでみるとよさそうです。


colorsなどのnpmパッケージに悪意あるコードが含まれている問題についてという記事では、colorsというnpmパッケージにDoS攻撃のコードが含まれたものがpatchバージョンとして公開された問題について書かれています。

npmではleftpadと呼ばれる問題をきっかけに、パッケージのOwnerであっても公開後24時間経過するとその公開を取り下げるには問い合わせが必要になっています。(細かな条件が2020年に追加されています)

また、npmやyarnなどでロックファイルがデフォルトとなっているため、既存のプロジェクトではバージョンが固定でき、影響範囲がleftpadの時に比べて小さくなっています。
一方で、colorsを新規インストールした際やアップデートした際に、問題があるpatchバージョンがsemverによって選択されてしまう問題があります。

この記事では、npmパッケージの直接的/間接的依存のチェック方法やYarnのresolutions、npm 8.3+のoverridesでの明示的なバージョン固定方法について書かれています。

現時点(2022-01-11)では、問題のあったcolorsのバージョンはnpmによって取り消されています。
今後のcolors.jsについては、次のIssueを参照してください。


ヘッドライン


January 10th 2022 Security Releases | Node.js

nodejs.org/en/blog/vulnerability/jan-2022-security-releases/

node.js security ReleaseNote

Node.jsのセキュリティ修正が12.x, 14.x, 16.x, 17.x それぞれでリリースされている。
Subject Alternative Name (SAN)に関する修正が2つ含まれていて、この修正は--security-revertフラグで戻すことができる。
また、Relative Distinguished Namesの扱いに関する修正やconsole.tableのPrototype Pollutionの修正が含まれている


Chromium Blog: Chrome 98 Beta: Color Gradient Vector Fonts, Region Capture Origin Trial, and More

blog.chromium.org/2022/01/chrome-98-beta-color-gradient-vector.html

Chrome ReleaseNote

Chrome 98 betaリリース。
COLRv1 Color Gradient Vector Fontsのサポート、Chromeのバージョン100をテストできるフラグの追加。
Origin Trialとして、Region Captureの追加。
その他では、contains-intrinsic-size: autoのサポート、AudioContext.outputLatencyのサポート、color-schemeでのonlyのサポート。
structuredClone()のサポート、SubresourcesからPrivate Networkへのアクセス時にPreflight Requestが求められるように変更など


アーティクル


Improving Core Web Vitals, A Smashing Magazine Case Study

www.smashingmagazine.com/2021/12/core-web-vitals-case-study-smashing-magazine/

performance article

Core Web Vitalsの改善とCrUXのメトリクスを掘り下げた記事。
LCPなどを改善したが、CrUXのデータが改善されなかった点を掘り下げていき、特定地域のデータによって統計データが歪んでいたことを特定した方法について。
CDNがカバーしきれてない地域などが問題となっていたため、SaveDataヘッダとprefers-reduced-dataを元にWeb Fontのロードを減らした話。


2021 JavaScript Rising Stars

risingstars.js.org/2021/en

JavaScript library Tools article Github

JavaScript関係のツールやライブラリなどの2021年のGitHub Starでのランキング。
各カテゴリごとのランキングやコメントも合わせて紹介されている。


Container Queries | 12 Days of Web

12daysofweb.dev/2021/container-queries/

CSS article

CSS Container queryの定義、利用方法、ユースケースについて


Introducing fuite: a tool for finding memory leaks in web apps | Read the Tea Leaves

nolanlawson.com/2021/12/17/introducing-fuite-a-tool-for-finding-memory-leaks-in-web-apps/

browser debug article Tools

fuiteというメモリリークのデバッグツールについて。
Puppeteerを使ってシナリオベースの操作をし、指定回数繰り返した結果のメモリリークを確認できる。
実行時にBreak Pointを貼ってブラウザの処理を止め、Chrome DevToolsと接続して開発者ツールによってデバッグができる。


Web Performance Calendar » JS Self-Profiling API In Practice

calendar.perfplanet.com/2021/js-self-profiling-api-in-practice/

JavaScript performance article

JavaScript Self-Profiling APIについての解説記事。
サンプリングされたプロファイルを取るAPIとなっていて、RUMのような実際のエンドユーザーでの実行結果を取得できる。
Document Policyでの有効化、APIの使い方、ユースケース、プロファイルのデータ形式と取得データの制限などについて。
CORSに対応していないCross-Origin ScriptsのJavaScript関数は、プロファイル上では見えないことやJS以外のデータがプロファイルに入らない点などについて。


Frontend Web Performance: The Essentials [0] | by Matthew Costello | Dec, 2021 | Medium

medium.com/@matthew.costello/frontend-web-performance-the-essentials-0-61fea500b180

browser performance debug article

ウェブパフォーマンスやブラウザのレンダリングについての記事。
Chrome開発者ツールでLayout, Paint, Compositeとはどのようなレンダリングステップで行われているのかみていく記事。
CSS Animationを例に、Chrome開発者ツールでそれぞれのレンダリングステップを可視化する方法について書かれている


colorsなどのnpmパッケージに悪意あるコードが含まれている問題について

zenn.dev/azu/articles/d56615b2e11ad1

npm security article

colors.jsにDoS攻撃のコードを入れたものがpublishされていた問題について。
npmパッケージの直接的/間接的依存のチェック方法やYarnのresolutions、npm 8.3+のoverridesでのバージョン固定方法について。


スライド、動画関係


shiguredo/media-processors: Media Processors

github.com/shiguredo/media-processors

JavaScript browser video audio library

背景ぼかしやノイズ抑制など処理をブラウザで行うライブラリ


サイト、サービス、ドキュメント


mozilla/glean: Modern cross-platform telemetry

github.com/mozilla/glean

kotlin swift python node.js library performance Mozilla Rust

Rust/Kotlin/Swift/Python/JavaScript(ブラウザとブラウザ拡張とNode.js)/Qtに対応したクロスプラットフォームなTelemetry SDK


ソフトウェア、ツール、ライブラリ関係


AntoineW/luge: Luge

github.com/AntoineW/luge

CSS JavaScript library animation

HTMLに属性を指定することでアニメーションできるライブラリ


書籍関係


New JavaScript features • JavaScript for impatient programmers (ES2022 edition)

exploringjs.com/impatient-js/ch_new-javascript-features.html#new-in-es2022

ECMAScript book

JavaScript for impatient programmers (ES2022 edition)リリース。
ES2022のPrivate/Public Fields、Top-level await、Error Cause。
ArrayとStringの.at()メソッド、RegExp match indices、Object.hasOwn()メソッドについて追加されている。


この記事へ修正リクエストをする
JSer.info Slackに参加する