Fork me on GitHub

2020-12-17のJS: Deno 1.6(deno compile)、Firefox 84/MDNの刷新、Chrome Developer Summit 2020

Edit on GitHub 編集履歴を見る

JSer.info #518 - Deno 1.6がリリースされました。

まだ最適化はされていませんがdeno compileで単独で動作するバイナリを出力できるようになっています。
また、deno lspでDenoビルトインのLSPが利用できるように、TypeScript 4.1へアップデートなどが含まれています。


Firefox 84がリリースされました。

Accessiblity Inspectorに"Tabbing Order"の表示を追加、PerformancePaintTimingのサポートが追加されています。
AppCacheの削除、http://localhostなどのループバックアドレスから読まれたリソースをMixed Contentとして扱わないように変更なども含まれています。

あわせて、MDN Web Docsが新しいアーキテクチャ(Yari)で刷新されています。


Chrome Dev Summit 2020の動画が公開されています。

それぞれの動画に字幕(日本語は翻訳字幕)がつけられているので、興味がある人は見てみると良いかもしれません。


ヘッドライン


Node v15.4.0 (Current) | Node.js

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

node.js ReleaseNote

Node.js 15.4.0リリース。
child_process.execFile/EventTarget/StreamがAbortSignalをサポート、response.setHeaderがメソッドチェーンできるように。
Experimentalとしてworker_threadsモジュールにBroadcastChannelを実装など。


Deno 1.6 Release Notes

deno.land/posts/v1.6

deno ReleaseNote

Deno 1.6リリース。
deno compileでバイナリを出力できるように、deno lspでDenoビルトインのLSPが利用できるように、TypeScript 4.1へアップデート。
また、Deno 1.5で初期値がtrueとなったisolatedModulesの設定を変更できないようになるなど


Announcing Nexus 1.0: A Major Release for Type-Safe, Code-First GraphQL APIs

www.prisma.io/blog/announcing-the-release-of-nexus-schema-v1-b5eno5g08d0b

prisma GraphQL library ReleaseNote

コードファーストなGraphQL APIサーバであるNexus 1.0リリース。
nullableの扱いを変更、ドキュメントサイトの刷新、JSDoでのドキュメントサポートなど


Release v3! (But technically 3.2.0 😂) · tannerlinsley/react-query

github.com/tannerlinsley/react-query/releases/tag/v3.2.0

React JavaScript library ReleaseNote

React Query 3リリース。
QueryCacheQueryClientの分離、useInfiniteQueryが両方向をサポート、react-query-devtoolsreact-queryパッケージに同梱されるように


And now for … Firefox 84 - Mozilla Hacks - the Web developer blog

hacks.mozilla.org/2020/12/and-now-for-firefox-84/

Firefox ReleaseNote

Firefox 84リリース。
Accessiblity Inspectorに"Tabbing Order"の表示を追加、PerformancePaintTimingのサポート。
AppCacheの削除、http://localhostなどのループバックアドレスから読まれたリソースをMixed Contentとして扱わないように変更など


Release 4.0.0 · facebook/flux

github.com/facebook/flux/releases/tag/4.0.0

Flux JavaScript library ReleaseNote

flux 4.0.0リリース。
flux自体はメンテナンスモードとなっている。
fbjsのアップデート、Babel 7との互換性に関する修正、React 17をPeerDependenciesに追加


Welcome Yari: MDN Web Docs has a new platform - Mozilla Hacks - the Web developer blog

hacks.mozilla.org/2020/12/welcome-yari-mdn-web-docs-has-a-new-platform/

mdn news document

MDNの新しいバージョン(Yari)が公開された。
GitHubとMarkdownを使ったコンテンツ管理となり、Jamstackアプローチなサイト構成になる。
翻訳に関しては初期の方針を変更し、日本語/中国語/フランス語のTier 1言語に関しては手動での翻訳を受け付けられるようにする。


v1.10.0: New Compiler Options API, Resize and Screenshot Support for Child Windows | TestCafe

devexpress.github.io/testcafe/blog/v1-10-0-new-compiler-options-api-resize-and-screenshot-support-for-child-windows.html

browser testing E2E ReleaseNote

TestCafe v1.10.0リリース。
Child Windowのスクリーンショットやリサイズのサポート、TypeScript CompilerオプションのAPIを追加、Shadow DOMへアクセスするメソッドの追加など


アーティクル


Roadmap 2021 (2020-12-08) | webpack

webpack.js.org/blog/2020-12-08-roadmap-2021/

webpack article

webpackの今後のロードマップについて。
エッジケースへの対応、ESMの対応改善、モジュールとしてのCSSやHTML、エントリポイントとしてのHTML。
Source Mapのパフォーマンス改善、Nodeのexportsなどの対応、CommonJSのTree Shakingの改善、マルチスレッドの対応など。
いろいろな項目を検討しているという話


polyfill を深堀りする - mizdra's blog

www.mizdra.net/entry/2020/12/05/234806

JavaScript polyfill library article

polyfill、transpile、shimの違いについて。


AddyOsmani.com - The Import On Interaction Pattern

addyosmani.com/blog/import-on-interaction/

JavaScript performance article

ユーザーがUIを必要となったタイミングで、リソースを遅延ロードするという話。
クリックしたタイミングでウィジェットをロードして表示するなど。いろいろなサイトの事例ごとに遅延ロードで取得するリソースのサイズ、インタラクションに関するパフォーマンスの違いについてまとめられている。
また、ReactやVueでの実装、静的なものへの置き換えについてなど


Introduction to Event Loop Utilization in Node.js - NodeSource

nodesource.com/blog/event-loop-utilization-nodejs

node.js article performance

perf_hookseventLoopUtilization()を使ったEvent Loop Utilization (ELU)の収集について。
スケーリングのメトリクスにイベントループの使用率(ELU)を使う話、CPU使用率との比較、モジュールの使い方について


Publish, ship, and install modern JavaScript for faster applications

web.dev/publish-modern-javascript/

JavaScript article

modern browserとlegacy browser向けにJavaScriptのbundleを分けて配布する際に、ビルドやwebpackでのbundleを最適化するプラグインについての紹介記事


スライド、動画関係


Chrome Developer Summit 2020 - YouTube

www.youtube.com/playlist?list=PLNYkxOF6rcIDzLmWaDwfHVZJl1Q5RFgOR

Chrome Conference video

Chrome Developer Summit 2020の動画一覧。
それぞれの動画に字幕/翻訳がついている


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


Chrome Developers

developer.chrome.com/

Chrome document

Google Chromeの新機能、DevToolsのドキュメント、拡張のドキュメントなどを扱うChromeのポータルサイト


Automating audits with AutoWebPerf

web.dev/autowebperf/

Chrome performance browser Tools

WebPageTestやPageSpeed Insightsなどを使い、特定のサイトのパフォーマンスを計測したデータをGoogle Sheetsに出力し、パフォーマンスダッシュボードを作成するツール。


gildas-lormeau/SingleFile: Web Extension for Firefox/Chrome/MS Edge and CLI tool to save a faithful copy of an entire web page in a single HTML file

github.com/gildas-lormeau/SingleFile

Firefox Chrome Extension console Tools

ウェブサイトをシングルファイルのHTMLとして保存できるブラウザ拡張とCLI


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


rafgraph/rollpkg: Convention over configuration way to create packages with Rollup and TypeScript

github.com/rafgraph/rollpkg

JavaScript bundler TypeScript

TypeScriptとRollupを使ったパッケージ開発のためツールキット。
CJS、ESMなどの各種モジュールのビルド、tsconfigやprettierなどのプリセット、ビルド時に開発向けのコードを取り除く仕組みなどをもつ


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