JSer.info #503 - Firefox 80がリリースされました。

ES2020のexport * as namespace構文のサポート、CSSのappearanceプロパティをprefixなしでサポートしています。
また、window.open()がouterWidthとouterHeightを無視するように、Cache-Controlが設定されている場合にPragmaヘッダは無視されるようになるといった変更も含まれています。

D3.js 6.0.0がリリースされました。

ES2015のIterable、Map、Setをネイティブで利用するようになっています。
d3.event経由でイベントを受け取るのではなくlistner関数の第一引数にeventを渡すようになるといったイベントの仕組みを変更が含まれています。

その他にも一部パッケージの非推奨化(削除)や変更が含まれています。

d3-collectionの削除 → MapやSetのビルトインメソッドやd3-array
d3-voronoiの削除 → d3-delaunay
d3.mouse, d3.touch, d3.touches, d3.clientPointの削除 →　d3.pointer, d3.pointers

マイグレーションガイドも合わせて公開されています。

D3 6.0 migration guide / D3 / Observable

Chrome 85がリリースされています。

JavaScriptではES2021に入る予定のPromise.anyとAggregateError、String.prototype.replaceAll、Logical assignment operatorsがサポートされています。JavaScriptについては、V8 8.5のブログにまとめられています。

V8 release v8.5 · V8

CSS content-visibilityの実装、CSS PropertiesをCSSで定義する@propertyの実装、AVIF画像のサポートが含まれています。
Origin TrialとしてFetch APIのStreaming requests、WebHID、Declarative Shadow DOM、Portalのサポート。
また、Referrer Policyのデフォルト値をstrict-origin-when-cross-originに変更、Secure属性なしのSameSite=Noneのサポート終了といった変更も含まれています。

theheadless.dev - Learn Puppeteer & Playwrightというサイトでは、PuppeteerとPlaywrightの使い方やユースケースについてまとめられています。
このサイトでは、PuppeteerとPlaywrightの基本的な使い方からE2Eテストやスクレイピングなどのユースケースごとの使い方について紹介しています。

また、同時期にTestimからtestimio/root-causeというPuppeteerとPlaywrightでのE2Eテストを支援するフレームワークが公開されています。
testimio/root-causeでは、それぞれの実行ステップをスクリーンショットで保存、コンソールログやネットワーク(HAR)ファイルの保存してレポートからテストが失敗した原因を検証できるようになっています。
また、単独で動かす方法とJestやMochaなどのテストフレームワークに統合するライブラリを提供しているようです。

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

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

JSer.info Sponsors

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

ヘッドライン

Firefox 80.0, See All New Features, Updates and Fixes

www.mozilla.org/en-US/firefox/80.0/releasenotes/

Firefox ReleaseNote

Firefox 80.0リリース。
ES2020のexport * as namespace構文のサポート。
window.open()がouterWidthとouterHeightを無視するように、Cache-Controlが設定されている場合にPragmaヘッダは無視されるようになるなど

Release v6.0.0 · d3/d3

github.com/d3/d3/releases/tag/v6.0.0

d3.js JavaScript library

D3.js 6.0.0リリース。
ES2015のIterable、Map、Setを利用するように、bowerの対応を削除。
d3-selectionなどのイベントの仕組みを変更、d3-collectionの非推奨化など

d3/CHANGES.md at master · d3/d3

New in Chrome 85 | Web | Google Developers

developers.google.com/web/updates/2020/08/nic85

Chrome ReleaseNote

Chrome 85リリース。
CSS content-visibilityの実装、CSS PropertiesをCSSで定義する@propertyの実装、AVIF画像のサポート。
Origin TrialとしてFetch APIのStreaming requests、WebHID、Declarative Shadow DOM、Portalのサポート。
また、Referrer Policyのデフォルト値をstrict-origin-when-cross-originに変更など

V8 release v8.5 · V8

v8.dev/blog/v8-release-85

V8 ReleaseNote

V8 8.5リリース。
ES2021予定のPromise.anyとAggregateErrorのサポート、String#replaceAllのサポート、Logical assignment operatorsのサポート。
WebAssemblyのbaseline compilerであるLiftoffが全てのプラットフォームで使われるようになるなど

Yarn 2.2 🚅🌟 Dedupe, Faster, Lighter, ... - DEV Community 👩‍💻👨‍💻

dev.to/arcanis/yarn-2-2-dedupe-faster-lighter-ha5

yarn ReleaseNote

Yarn 2.2リリース。
yarn dedupeの追加、パフォーマンス改善、オプトアウト方式でYarnの利用情報をDatadogに送るように

berry/CHANGELOG.md at master · yarnpkg/berry

アーティクル

content-visibility: the new CSS property that boosts your rendering performance

web.dev/content-visibility/

CSS article Chrome performance

Chrome 85で実装されたCSS content-visibilityプロパティについて。
CSS Containmentに依存した仕様。
DOMのサブツリーに予測できる空間を定義することで、ブラウザがレンダリングを省略して最適化するための仕組み。
display: none、visibility: hiddenとの違い、content-visibilityプロパティのユースケースとしての無限スクロールなどについて

Introducing Danfo.js, a Pandas-like Library in JavaScript — The TensorFlow Blog

blog.tensorflow.org/2020/08/introducing-danfo-js-pandas-like-library-in-javascript.html

MachineLearning JavaScript library article

PandasインスパイアなライブラリであるDanfo.jsについて。
TensorFlow.jsと組み合わせて利用できる

opensource9ja/danfojs: danfo.js is an open source, JavaScript library providing high performance, intuitive, and easy to use data structures for manipulating and processing structured data.

スライド、動画関係

Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11 - Speaker Deck

speakerdeck.com/potato4d/vue-dot-js-with-tsx-from-vue-2-dot-x-to-vue-3-number-v-tokyo11

Vue jsx TypeScript slide

VueでのTSX利用についてスライド。
Vue2/Vue3でのTSXの利用方法と制限、VueのSFCとTSXの比較など

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

gluesql/gluesql: GlueSQL is quite sticky, it attaches to anywhere.

github.com/gluesql/gluesql

Rust JavaScript DB

ライブラリとしてのSQLデータベース。
RustとWebAssembly(JavaScript)での実装が提供されている。
JavaScript版はInMemoery、LocalStorageなどで動作する

testimio/root-cause

github.com/testimio/root-cause

JavaScript browser library Tools testing

PuppeteerとPlaywrightを使ったE2Eテストの補助ツール。
それぞれの実行ステップをスクリーンショットで保存、コンソールログやネットワーク(HAR)ファイルの保存してレポートからテストが失敗した原因を検証できる。
単独で動かす方法とJestやMochaなどのテストフレームワークに統合するライブラリを提供している。