JSer.info #532 - Node.js 15.12.0がリリースされました。

• Node v15.12.0 (Current) | Node.js

fsのreadFile/writeFileに対してPromise版のfs.promisesのreadFile/writeFileが遅くなるというIssueがあります。

• fs.promises.readFile is 40% slower than fs.readFile · Issue #37583 · nodejs/node

Node.js 15.12.0ではこのパフォーマンス問題への改善が含まれています。

• fs: improve fsPromises readFile performance by Linkgoron · Pull Request #37608 · nodejs/node
• fs: improve fsPromises writeFile performance by Linkgoron · Pull Request #37610 · nodejs/node
  • writeに関してはコールバック版とほぼ同等になっている

その他にはcrypto.create{Public,Private}KeyがJWKオブジェクトをサポート、AbortSignal.abort()の実装、worker_threadsモジュールに{get,set}EnvironmentDataが追加されています。

Mitigate cross-site scripting (XSS) with a strict Content Security Policy (CSP)という記事では、Content Security Policy (CSP)を使ったXSSの影響を軽減するアプローチについて書かれています。

CSPには、特定のURLを許可リスト方式で扱う設定がありますが、許可したURLにJSONPなどのエンドポイントがあるとバイパスされる問題が知られています。

• CSP Is Dead, Long Live Strict CSP! - DeepSec 2016 - Speaker Deck
• Content Security Policy: A successful mess between hardening and mitigation - Speaker Deck

そのため、nonceベースかhashベースのstrictなCSP設定をすることで、CSPがバイパスされる可能性は低くなります。
この記事では、nonceベースとhashベースのstrict CSP設定をどのようにするかについて書かれています。

CSS Auditing Tools — Smashing Magazineという記事では、CSSのAuditツールについてまとめられています。

• CSS Stats
• Yellow Lab Tools - Page Speed audit
• Specificity Visualizer
• CSS Analytics - Project Wallace
• katiefenn/parker: Stylesheet analysis tool.
• Chrome DevTools
  • CSS Overview Panel - Chrome DevTools - Dev Tips
  • Find Unused JavaScript And CSS Code With The Coverage Tab In Chrome DevTools

それぞれのツールの紹介やどのような項目を調べられるのかについてまとめられています。

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

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

JSer.info Sponsors

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

ヘッドライン

Node v15.12.0 (Current) | Node.js

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

node.js ReleaseNote

Node.js 15.12.0リリース。
crypto.create{Public,Private}KeyがJWKオブジェクトをサポート、fs.promisesのwriteFileとreadFileのパフォーマンス改善。
AbortSignal.abort()の実装、worker_threadsモジュールに{get,set}EnvironmentDataを追加など

• fs.promises.readFile is 40% slower than fs.readFile · Issue #37583 · nodejs/node

V8 release v9.0 · V8

v8.dev/blog/v8-release-90

V8 ReleaseNote

V8 v9.0リリース。
RegExp#insicesの実装、superのプロパティアクセスのパフォーマンス改善、JavaScriptからWasmの関数を呼ぶときのパフォーマンスを改善など

Release v7.3.0 · GoogleChrome/lighthouse

github.com/GoogleChrome/lighthouse/releases/tag/v7.3.0

performance Tools ReleaseNote Chrome

Lighthouse 7.3.0リリース。
新しいauditとしてcsp-xssを試験的に追加。

• new_audit: csp-xss by adamraine · Pull Request #12044 · GoogleChrome/lighthouse

jasmine/3.7.0.md at main · jasmine/jasmine

github.com/jasmine/jasmine/blob/main/release_notes/3.7.0.md

JavaScript library ReleaseNote testing

Jasmine 3.7リリース。
Node.jsのSource Mapsに対応、Array.prototypeを拡張している際にテストが一部落ちる問題の修正、.and.callFakeがGenerator関数をサポートなど

• Source maps in Node.js. Supporting the many flavors of… | by Node.js | Medium

ECMAScript proposal updates @ 2021-03 | ECMAScript Daily

ecmascript-daily.github.io/ecmascript/2021/03/22/ecmascript-proposal-update

ECMAScript news

2021年3月のTC39でECMAScript Proposalのステータス変更のまとめ。
Module FragmentsがStage 1へ、Array#findLastがStage2へ、TemporalがStage 3へ更新など

• JavaScript の Module Fragments について

sinon/CHANGELOG.md at master · sinonjs/sinon

github.com/sinonjs/sinon/blob/master/CHANGELOG.md#1000--2021-03-22

JavaScript testing library ReleaseNote

Sinon.js 10.0.0リリース。
IE 11、Legacy Edge、Legacy Safariのサポートを終了。

アーティクル

Mitigate cross-site scripting (XSS) with a strict Content Security Policy (CSP)

web.dev/strict-csp/

CSP article security

ドメインの許可リストのCSPよりも、strict設定のCSPを推奨するという話。
nonceとstrict-dynamicベースのCSP設定で防げるXSS、nonceベースとhashベースのCSPの設定、CSPの導入手順について

Supabseチームはどのようにフロントエンドの高速化に成功したのか - バンクーバーで考え中

jp.taishikato.com/posts/making-the-supabase-dashboard-supa-fast

performance article

Making the Supabase Dashboard Supa-fastの翻訳記事。
ベースラインと目標設定、バンドルサイズの改善、パフォーマンス文化について

• Making the Supabase Dashboard Supa-fast

The #1 tip to familiarize with new JavaScript Codebases

www.kevinpeters.net/the-fastest-way-to-understand-new-code-bases

JavaScript article

code-complexityを使ったコードの複雑度分析について。
ComplexityとChurnについて

• simonrenoult/code-complexity: Measure the churn/complexity ratio. Higher values mean hotspots where refactorings should happen.

CSS Auditing Tools — Smashing Magazine

www.smashingmagazine.com/2021/03/css-auditing-tools/

CSS article Tools

CSSのAuditツールについての記事。
CSSセレクタの詳細度、複雑度の測定、Code Coverage、継続的な分析など

Next 10 years of Node.js — Understanding the needs of the Node.js constituencies | by Node.js | Mar, 2021 | Medium

nodejs.medium.com/next-10-years-of-node-js-understanding-the-needs-of-the-node-js-constituencies-2f95a1df6a6f

node.js article

Node.jsの次の10年について

• nodejs/next-10: Repository for discussion on strategic directions for next 10 years of Node.js

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

101arrowz/isoworker: Isomorphic workerization with context support

github.com/101arrowz/isoworker

browser node.js library

WebWorkerとworker_thredsに対応したWorkerライブラリ。
Inline CodeをWorkerコードを作成し、Workerに対してクラスや関数を含めたデータを渡して実行した結果を取得できる

taoqf/node-html-parser: A very fast HTML parser, generating a simplified DOM, with basic element query support.

github.com/taoqf/node-html-parser

HTML DOM library

HTMLパーサとDOM APIライブラリ。
パースした結果のオブジェクトでDOM APIライクな操作ができる。

Hello from tRPC | tRPC

trpc.io/

JavaScript browser node.js library TypeScript React Next.js

HTTP通信のデータレイヤーライブラリ。
TypeScriptとyup/zodなどのバリデーターを使ったサーバ側のAPIエンドポイントを定義し、その型をクライアントからも利用できる。
React向けのHooks/SSR対応のクライアントライブラリも公開されている。

Charts.css

chartscss.org/

CSS library

CSSを使ったグラフライブラリ。
様々な種類のチャートの表示に対応している。

書籍関係

Learning TensorFlow.js

learning.oreilly.com/library/view/learning-tensorflowjs/9781492090786/

JavaScript MachineLearning book

2021年7月発売
TensorFlow.jsの入門書