JSer.info #520 - CSSの各仕様の現在のステータスを一覧する目的であるCSS Snapshot 2020が公開されています。

スナップショットとしてCSSモジュール(ここではCSSの各仕様のこと)のステータスとサマリがまとまとめられています。
CSSの仕様の全体像が分かりやすいので、興味がある人は見てみると良いかもしれません。

また、最新のステータスはCSS current work & how to participateで確認できます。

JavaScript Performance in the Wild 2020 | CatchJSという記事では、Trancoのデータを元にした100万サイトをPuppeteerでクロールした調査結果についてまとめられています。

どのような要因がウェブサイトのパフォーマンスに影響を与えているかを調査するために集めたデータとなっていて、ライブラリとメトリクスへの影響などについて書かれています。
集められたデータはKaggleで公開されています。

Web Performance Metrics | Kaggle

また、類似するデータはHTTP Archiveでも公開されているので興味がある人は調べてみると良いかもしれません。

CatchJSの記事では、同様の調査からウェブサイトのエラーについて書かれています。

JavaScript Errors in the Wild 2020 | CatchJS

War stories: The move from Flow to TypeScriptという記事ではFlowからTypeScriptへの移行について書かれています。

js-unused-exportsをベースにした使われてないファイルの削除、flow-to-tsを使った変換、ESLintを使ったフォーマットの修正といったどのようにコードを移行していったかについて書かれています。
また移行期間中のコードのフリーズした話やマイグレーションの目標設定と目標の計測についても書かれています。

JSer.infoをサポートするには

😘 知り合いにJSer.infoをおすすめする
❤️ GitHub Sponsorsで@azuのスポンサーになる
🐦 X(Twitter)で@jser_infoをフォローする

JSer.info Sponsors

JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。

ヘッドライン

Announcing Volta 1.0.0 | Volta

blog.volta.sh/2020/12/21/announcing-volta-100/

JavaScript node.js Rust Tools ReleaseNote

Nodeやnpmのバージョン管理ツールであるVolta 1.0.0リリース。

Node v15.5.0 (Current) | Node.js

nodejs.org/en/blog/release/v15.5.0/

node.js ReleaseNote

Node v15.5.0リリース。
child_processとstreamがAbortSignalをサポート、querystring.stringify()がBigIntをサポートなど

Release 4.0.0 · fuse-box/fuse-box

github.com/fuse-box/fuse-box/releases/tag/v4.0.0

bundler Tools ReleaseNote

FuseBox 4.0リリース。
破壊的な変更としてhomeDir、output、useSigleBundleの削除。
watchオプションをwatcherにリネーム、
outputオプションの代わりにbundles.distRootを使うように変更など

Changelog fuse 3 to 4 · FuseBox

CSS Snapshot 2020

www.w3.org/TR/2020/NOTE-css-2020-20201222/

CSS spec ReleaseNote

CSS Snapshot 2020リリース

cross-env is "finished" (now in maintenance mode) · Issue #257 · kentcdodds/cross-env

github.com/kentcdodds/cross-env/issues/257

node.js library news

cross-envがメンテナンスモードとなりアーカイブされた。
機能として完成していて、これ以上機能追加することはないため。セキュリティアップデートと新しいNode.jsへの対応は続けるメンテナンスモードとなった

アーティクル

CSS Containment によるパフォーマンス改善 — HACK The Nikkei

hack.nikkei.com/blog/advent20201219/

browser performance article

CSS Containmentのcontain: contentによるPaint Timeの改善について。

Web Performance Calendar » Strategies for Telemetry Exfiltration (aka Beaconing In Practice)

calendar.perfplanet.com/2020/beaconing-in-practice/

article browser WebPlatformAPI

ブラウザからメトリクスデータを送信するときの戦略について。
navigator.sendBeacon/Fetch/XHR/pixel imageでの送信、どのタイミングで送信するかのライフサイクルイベントの到達信頼性についての調査。
ローカルストレージでの再送やService Workerでのバッファ、Reporting APIについてなど。

Maximally optimizing image loading for the web in 2021

www.industrialempathy.com/posts/image-optimizations/

article performance browser

画像の読み込みの最適化についてまとめた記事。
widthとheightでのCLSの回避、content-visibility、AVIF、srcsetとsize属性、Cache-Controlヘッダ、loading属性とdecoding属性。
プレースホルダー画像を使う方法についてなど

War stories: The move from Flow to TypeScript

react.christmas/2020/2

flowtype TypeScript article

約15日でFlowからTypeScriptのマイグレーションした話。
js-unused-exportsを使った使われてないファイルの削除、flow-to-tsを使った変換、ESLintを使ったフォーマットの修正。
コードのフリーズとマイグレーションの目標について

JavaScript Performance in the Wild 2020 | CatchJS

catchjs.com/Blog/PerformanceInTheWild

article performance browser

https://tranco-list.eu/ のデータを元にサイトをPuppeteerでクロールして集めたパフォーマンスに関するデータセットについて。
Kaggleでデータセットを公開している。
HTTPのプロトコルバージョン、サードパーティリソース、ライブラリとそれぞれのメトリクスの関係性などについて。
2.2%のサイトでjQueryのロードをしていないためにエラーが発生していることなどについて