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

開発者ツールのSource Mapロード時間の改善、デバッガーのステップ実行の改善、ネットワークパネルの改善などが行われています。
またES 2021で入る予定のString#replaceAllの実装、JPEG画像がExifデータに基づいて回転するように、maxlength以上の長さの文字列をペーストした場合に切り詰めしないように変更なども行われています。

image-orientationプロパティの初期値がnoneからfrom-imageに変更されています。
そのため、JavaScriptなどでメタデータを読み込んで画像を回転されているサイトなどには、この変更の影響が出るかもしれません。

JPEG 画像が初期設定で Exif データに従い回転させられるようになりました (影響あり) | Firefox サイト互換性情報

HTML5 Boilerplate 8.0.0がリリースされました。

HTML5 Boilerplate 8.0.0 Released – HTML + CSS + JavaScript

HTML5 Boilerplateは、HTML5のタグを使ったサイトのテンプレートを提供するプロジェクトで、初回のリリースから10年経ちます。
今回のアップデートではcreate-html5-boilerplateというセットアップツールの追加、サンプルのpackage.jsonにParcelを使ったビルドの追加、jQueryの依存を削除などが行われています。

その他にも依存のアップデートやドキュメントの更新などが行われています。

HTML5 Boilerplate: The web’s most popular front-end template

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

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

JSer.info Sponsors

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

ヘッドライン

June 2020 Security Releases | Node.js

nodejs.org/en/blog/vulnerability/june-2020-security-releases/

node.js security ReleaseNote

Node.jsのセキュリティアップデートそれぞれのバージョンがアップデートされている

Node.js v10.21.0 (LTS)
Node.js v12.18.0 (LTS)
Node.js v14.4.0 (Current)

New in Firefox 77: DevTool improvements and web platform updates - Mozilla Hacks - the Web developer blog

hacks.mozilla.org/2020/06/new-in-firefox-77-devtool-improvements-and-web-platform-updates/

Firefox ReleaseNote

Firefox 77リリース。
開発者ツールのSource Mapロード時間の改善、デバッガーのステップ実行の改善、ネットワークパネルの改善など。
またString#replaceAllの実装、JPEG画像がExifデータに基づいて回転するように、maxlength以上の長さの文字列をペーストした場合に切り詰めしないように変更など

HTML5 Boilerplate 8.0.0 Released – HTML + CSS + JavaScript

htmlcssjavascript.com/web/html5-boilerplate-8-0-0-released/

HTML5 Tools ReleaseNote

HTML5 Boilerplate 8.0.0リリース。
npx create-html5-boilerplateの追加、Pracelを使ったサンプルの追加、jQueryの削除、レガシーIE向けのブラウザアップグレードプロンプトを削除など

ESLint v7.2.0 released - ESLint - Pluggable JavaScript linter

eslint.org/blog/2020/06/eslint-v7.2.0-released

ESLint ReleaseNote

ESLint 7.2.0リリース。
ES2020で入る予定のNullish coalescing operatorやimport.metaなどをサポート(Optional Chainはまだ未サポート)。
no-extra-parensにenforceForFunctionPrototypeMethodsオプションの追加など

ESLint v7.2.0 - Qiita

angular.js/CHANGELOG.md at master · angular/angular.js

github.com/angular/angular.js/blob/master/CHANGELOG.md#180-nested-vaccination-2020-06-01

Angular ReleaseNote

AngularJS 1.8.0リリース。
jQuery 3.5で修正されたXSSの問題に対するために、一部非互換な変更を含むセキュリティアップデート

jQuery Core 3.5 Upgrade Guide | jQuery

アーティクル

webpackの次のバージョンで入るassetModulesの紹介 - 技術探し

blog.hiroppy.me/entry/webpack-asset-modules

webpack article

webpack 5で導入される予定のAsset Modulesについて
raw-loader. file-loader, url-loaderの代わりとなるplugin

Securing JavaScript Modules - Agoric - Medium

medium.com/agoric/ses-support-for-ecmascript-modules-28fc1beb709c

security ECMAScript JavaScript article

Secure EcmaScript (SES)についての記事。
SESにおけるObject-capability model、SES shimsの実装、compartment(enviroment)について

Case study: Analyzing Notion app performance · PerfPerfPerf

3perf.com/blog/notion/

jacvas performance browser article

Notionのページをリバースエンジニアリングしてパフォーマンスの改善ポイントを見ていく話。
ロード関するJavaScriptコードの分離、初期化処理の遅延実行、webpackのconcatenateModulesオプション。
利用していないコードの削除、core-jsの複数バージョンが含まれる問題、サードパーティスクリプトの遅延ロード、SSR時のstateの渡し方とscriptのpreloadについてなど

Service Worker Lifecycle Explained | Felix Gerschau

felixgerschau.com/service-worker-lifecycle-update/

ServiceWorker article

Service Workerのライフサイクルについて解説した記事

画像による Layout Shift が無くなる Web がやって来る - mizdra's blog

www.mizdra.net/entry/2020/05/31/192613

browser article

ブラウザのデフォルトスタイルシートにaspect-ratioの指定が入ることで、widthとheight属性に値を入れることでLayout Shiftが抑えられることについて

img {
  aspect-ratio: attr(width) / attr(height);
}

スライド、動画関係

大規模改修の裏でTypeScriptとテスト導入をすすめた話 - Speaker Deck

speakerdeck.com/pittan/da-gui-mo-gai-xiu-falseli-detypescripttotesutodao-ru-wosusumetahua

JavaScript Prototype.js slide

テストがないJavaScriptのコードをTypeScriptへの移行とテストコードを少しずつ追加していく話。
段階的なTypeScriptへの移行について

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

Agoric/SES-shim: SES (Secure EcmaScript) is a secure runtime for executing third-party code safely

github.com/Agoric/ses-shim

security JavaScript library

SES(Secure EcmaScript)のshimライブラリ。
オブジェクトの書き換えできなくしたり環境できなくした環境でコードを実行する機能、セキュリティモデル。
一種のsandboxでコードを実行するための仕様の実装。

Securing JavaScript Modules - Agoric - Medium

TC39 Podcast

tc39er.us/

TC39 podcast ECMAScript

ECMAScriptの策定グループであるTC39についてのPodcast

React TypeScript Cheatsheets | React TypeScript Cheatsheets

react-typescript-cheatsheet.netlify.app/

React TypeScript document

TypeScript + Reactについてのドキュメント。
コンポーネントや特定の機能における型定義の方法、型定義のパターン、TypeScriptへの移行方法などついて書かれてる。

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

mvasilkov/assert-equal-html: Assert the equality of two HTML fragments

github.com/mvasilkov/assert-equal-html

HTML testing library

HTMLの断片同士を比較する関数。
パーサでHTMLをパースしてその結果を比較している

developit/redaxios: The Axios API, as an 800 byte Fetch wrapper.

github.com/developit/redaxios

JavaScript library Fetch

Fetch APIを使ったAxiosライクなAPIを実装する目的のHTTPライブラリ

garronej/denoify: 🦕For NPM module authors that would like to support Deno but do not want to write and maintain a port for it.

github.com/garronej/denoify

node.js deno Tools

npmモジュールをDenoから読み込めるように変換するtranspiler。
fsなどの互換モジュールの変換なども行う

JavaScriptの最新情報を紹介する週刊ブログ

2020-06-09のJS: Firefox 77.0、HTML5 Boilerplate 8.0.0、React TypeScript Cheatsheets