Fork me on GitHub

2020-12-29のJS: CSS Snapshot 2020、100万のサイトをクロールした調査結果、FlowからTypeScriptへの移行

Edit on GitHub 編集履歴を見る

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で公開されています。

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

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


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

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


ヘッドライン


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_processstreamが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リリース。
破壊的な変更としてhomeDiroutputuseSigleBundleの削除。
watchオプションをwatcherにリネーム、
outputオプションの代わりにbundles.distRootを使うように変更など


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、srcsetsize属性、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のロードをしていないためにエラーが発生していることなどについて


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


msn0/mdn-polyfills: MDN polyfills - from, forEach, filter, find, findIndex, assign, includes, create, entries, of, repeat, startsWith, endsWith, toggleAttribute, bind, MouseEvent, CustomEvent, padEnd, padStart

github.com/msn0/mdn-polyfills

JavaScript mdn library polyfill

MDNに載っているJavaScriptやDOM APIのpolyfillをまとめたパッケージ


jsDocs.io

www.jsdocs.io/

npm JavaScript library webservice

npmパッケージに含まれるTypeScriptの型定義ファイルをベースに自動的にドキュメントを生成して表示できるサービス


jameslittle230/stork: 🔎 Impossibly fast web search, made for static sites.

github.com/jameslittle230/stork

JavaScript Rust WebAssembly

Rustで書かれたindexerとWebAssemblyを使った検索ライブラリ。
検索対象のファイルからインデックスファイルを作り、それを元にした検索機能/UIを提供するライブラリ


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


devbridge/js-unused-exports

github.com/devbridge/js-unused-exports

JavaScript Tools

JavaScriptのファイルから使われてない関数、ファイルを抽出するツール。
細かい無視オプションやaliasの対応などのオプションをもっている。


書籍関係


Webブラウザセキュリティ ― Webアプリケーションの安全性を支える仕組みを整理する – 技術書出版と販売のラムダノート

www.lambdanote.com/collections/frontpage/products/wbs

browser security book

2021年1月5日 発売
ウェブセキュリティについての書籍。
SOP、CORS、CSPなどのOriginを境界にしたセキュリティ機構、ブラウザのプロセス分離モデル、Cookieについてなど


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