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 Blog Archive: changes to npm’s unpublish policy
- npm Blog Archive: Changes to npm Unpublish Policy - January 2020
また、npmやyarnなどでロックファイルがデフォルトとなっているため、既存のプロジェクトではバージョンが固定でき、影響範囲がleftpadの時に比べて小さくなっています。
一方で、colorsを新規インストールした際やアップデートした際に、問題があるpatchバージョンがsemverによって選択されてしまう問題があります。
この記事では、npmパッケージの直接的/間接的依存のチェック方法やYarnのresolutions、npm 8.3+のoverridesでの明示的なバージョン固定方法について書かれています。
現時点(2022-01-11)では、問題のあったcolorsのバージョンはnpmによって取り消されています。
今後のcolors.jsについては、次のIssueを参照してください。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
January 10th 2022 Security Releases | Node.js
nodejs.org/en/blog/vulnerability/jan-2022-security-releases/
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 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/
Core Web Vitalsの改善とCrUXのメトリクスを掘り下げた記事。
LCPなどを改善したが、CrUXのデータが改善されなかった点を掘り下げていき、特定地域のデータによって統計データが歪んでいたことを特定した方法について。
CDNがカバーしきれてない地域などが問題となっていたため、SaveDataヘッダとprefers-reduced-dataを元にWeb Fontのロードを減らした話。
2021 JavaScript Rising Stars
JavaScript関係のツールやライブラリなどの2021年のGitHub Starでのランキング。
各カテゴリごとのランキングやコメントも合わせて紹介されている。
Container Queries | 12 Days of Web
12daysofweb.dev/2021/container-queries/
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/
fuiteというメモリリークのデバッグツールについて。
Puppeteerを使ってシナリオベースの操作をし、指定回数繰り返した結果のメモリリークを確認できる。
実行時にBreak Pointを貼ってブラウザの処理を止め、Chrome DevToolsと接続して開発者ツールによってデバッグができる。
- nolanlawson/fuite: A tool for finding memory leaks in web apps
- Fixing memory leaks in web applications | Read the Tea Leaves
- Debugging a memory leak with fuite - YouTube
Web Performance Calendar » JS Self-Profiling API In Practice
calendar.perfplanet.com/2021/js-self-profiling-api-in-practice/
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
ウェブパフォーマンスやブラウザのレンダリングについての記事。
Chrome開発者ツールでLayout, Paint, Compositeとはどのようなレンダリングステップで行われているのかみていく記事。
CSS Animationを例に、Chrome開発者ツールでそれぞれのレンダリングステップを可視化する方法について書かれている
colorsなどのnpmパッケージに悪意あるコードが含まれている問題について
zenn.dev/azu/articles/d56615b2e11ad1
colors.jsにDoS攻撃のコードを入れたものがpublishされていた問題について。
npmパッケージの直接的/間接的依存のチェック方法やYarnのresolutions、npm 8.3+のoverridesでのバージョン固定方法について。
スライド、動画関係
shiguredo/media-processors: Media Processors
github.com/shiguredo/media-processors
背景ぼかしやノイズ抑制など処理をブラウザで行うライブラリ
サイト、サービス、ドキュメント
mozilla/glean: Modern cross-platform telemetry
Rust/Kotlin/Swift/Python/JavaScript(ブラウザとブラウザ拡張とNode.js)/Qtに対応したクロスプラットフォームなTelemetry SDK
ソフトウェア、ツール、ライブラリ関係
AntoineW/luge: Luge
HTMLに属性を指定することでアニメーションできるライブラリ
書籍関係
New JavaScript features • JavaScript for impatient programmers (ES2022 edition)
exploringjs.com/impatient-js/ch_new-javascript-features.html#new-in-es2022
JavaScript for impatient programmers (ES2022 edition)リリース。
ES2022のPrivate/Public Fields、Top-level await、Error Cause。
ArrayとStringの.at()メソッド、RegExp match indices、Object.hasOwn()メソッドについて追加されている。
